<!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à)圖環(huán)境 var oldcontext = oldcanvas.getContext('2d'); var nowcontext = nowcanvas.getContext('2d'); var img = new Image(); img.src = "./image/liuyifei.jpg"; //加載圖像到canvas畫(huà)布中 window.onload = function (){ oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height); } var startPoint;//截取圖像開(kāi)始坐標(biāo) var endPoint;//截圖圖像的結(jié)束坐標(biāo) var w; //截取圖像的寬度 var h; //截取圖像的高度 var flag = false; //用于判斷移動(dòng)事件事物控制 //鼠標(biāo)按下事件 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'; } //鼠標(biāo)移動(dòng)事件 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'; } } //鼠標(biāo)釋放事件 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)境對(duì)象 * image：圖像對(duì)象 * imgElementW：圖像顯示的寬度 * imgElementH：圖像顯示的高度 * sx:截取圖像的開(kāi)始X坐標(biāo) * sy:截取圖像的開(kāi)始Y坐標(biāo) * w:截取圖像的寬度 * h:截取圖像的高度 * */ function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){ //清理畫(huà)布，便于重新繪制 context.clearRect(0,0,imgElementW,imgElementH); //計(jì)算 ：比例 = 原圖像/顯示圖像 var ratioW = image.width/imgElementW; var ratioH = image.height/imgElementH; //根據(jù)截取圖像的所占位置及大小計(jì)算出在原圖所占的位置及大小 //.drawImage(圖像對(duì)象,原圖像截取的起始X坐標(biāo),原圖像截取的起始Y坐標(biāo),原圖像截取的寬度,原圖像截取的高度， // 繪制圖像的起始X坐標(biāo),繪制圖像的起始Y坐標(biāo),繪制圖像所需要的寬度,繪制圖像所需要的高度); context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h); } /* * 坐標(biāo)轉(zhuǎn)換：將window中的坐標(biāo)轉(zhuǎn)換到元素盒子中的坐標(biāo)，并返回(x,y)坐標(biāo) * element：canvas元素對(duì)象 * x:鼠標(biāo)在當(dāng)前窗口X坐標(biāo)值 * y:鼠標(biāo)在當(dāng)前窗口Y坐標(biāo)值 * */ function windowToCanvas(element,x,y){ //獲取當(dāng)前鼠標(biāo)在window中的坐標(biāo)值 // alert(event.clientX+"-------"+event.clientY); //獲取元素的坐標(biāo)屬性 var box = element.getBoundingClientRect(); var bx = x - box.left; var by = y - box.top; return {x:bx,y:by}; } </script></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
