canvas實現(xiàn)圖像截取功能

更新時間：2017年02月06日 16:24:20 作者：藍丶木魚

這篇文章主要為大家詳細介紹了canvas實現(xiàn)圖像截取功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas圖像截取的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-圖像截取</title> 
  <style> 
    canvas{ 
      border: 1px dashed red; 
      float: left; 
      position: relative; 
 
    } 
  </style> 
  </head> 
<body> 
  <div id="cantox" style="position: relative"> 
    <canvas id="oldcanvas" width="500px" height="300px"> 
    </canvas> 
    <div id="cliptox" style="position: absolute;display:none"></div> 
  </div> 
  <button id ="btnclip" style="float: left">截取該區(qū)域</button> 
  <canvas id="nowcanvas" width="500px" height="300px" > 
  </canvas> 
 
  <script> 
    //獲取div元素 
    var cantox = document.getElementById("cantox"); 
    var cliptox = document.getElementById("cliptox"); 
    var btnclip = document.getElementById("btnclip"); 
    //獲取到canvas元素 
    var oldcanvas = document.getElementById("oldcanvas"); 
    var nowcanvas = document.getElementById("nowcanvas"); 
    //獲取canvas中的畫圖環(huán)境 
    var oldcontext = oldcanvas.getContext('2d'); 
    var nowcontext = nowcanvas.getContext('2d'); 
 
    var img = new Image(); 
    img.src = "./image/liuyifei.jpg"; 
 
    //加載圖像到canvas畫布中 
    window.onload = function (){ 
      oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height); 
    } 
    var startPoint;//截取圖像開始坐標 
    var endPoint;//截圖圖像的結束坐標 
    var w; //截取圖像的寬度 
    var h; //截取圖像的高度 
    var flag = false; //用于判斷移動事件事物控制 
    //鼠標按下事件 
    cantox.onmousedown = function (e){ 
      flag = true; 
      cliptox.style.display = 'block'; 
      startPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY); 
      cliptox.style.left = startPoint.x+'px'; 
      cliptox.style.top = startPoint.y+'px'; 
    } 
 
    //鼠標移動事件 
    cantox.onmousemove = function (e){ 
      if(flag){ 
        cliptox.style.background = 'rgba(0,0,0,0.5)'; 
        endPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY); 
        w = endPoint.x - startPoint.x; 
        h = endPoint.y - startPoint.y; 
        cliptox.style.width = w +'px'; 
        cliptox.style.height = h+'px'; 
      } 
    } 
    //鼠標釋放事件 
    cantox.onmouseup = function (e){ 
      flag = false; 
    } 
 
    //按鈕截取事件 
    btnclip.onclick = function (){ 
      imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h); 
    } 
 
    /* 
    * 圖像截取函數(shù) 
    * context:繪制環(huán)境對象 
    * image：圖像對象 
    * imgElementW：圖像顯示的寬度 
    * imgElementH：圖像顯示的高度 
    * sx:截取圖像的開始X坐標 
    * sy:截取圖像的開始Y坐標 
    * w:截取圖像的寬度 
    * h:截取圖像的高度 
    * */ 
    function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){ 
      //清理畫布，便于重新繪制 
      context.clearRect(0,0,imgElementW,imgElementH); 
      //計算 ：比例 = 原圖像/顯示圖像 
      var ratioW = image.width/imgElementW; 
      var ratioH = image.height/imgElementH; 
      //根據(jù)截取圖像的所占位置及大小計算出在原圖所占的位置及大小 
      //.drawImage(圖像對象,原圖像截取的起始X坐標,原圖像截取的起始Y坐標,原圖像截取的寬度,原圖像截取的高度， 
      // 繪制圖像的起始X坐標,繪制圖像的起始Y坐標,繪制圖像所需要的寬度,繪制圖像所需要的高度); 
      context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h); 
    } 
 
    /* 
     * 坐標轉換：將window中的坐標轉換到元素盒子中的坐標，并返回(x,y)坐標 
     * element：canvas元素對象 
     * x:鼠標在當前窗口X坐標值 
     * y:鼠標在當前窗口Y坐標值 
     * */ 
    function windowToCanvas(element,x,y){ 
      //獲取當前鼠標在window中的坐標值 
      // alert(event.clientX+"-------"+event.clientY); 
      //獲取元素的坐標屬性 
      var box = element.getBoundingClientRect(); 
      var bx = x - box.left; 
      var by = y - box.top; 
      return {x:bx,y:by}; 
    } 
  </script> 
</body> 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: