Javascript canvas 拖動滑鼠截圖
阿新 • • 發佈:2019-01-10
使用mousemove,mousedown,mouseup事件來記錄左邊,drawimage函式完成截圖。
var c = document.getElementById("canvasIcPhoto"); var ctx=c.getContext("2d"); var x1,y1,x2,y2; $("#imgIc").mousemove(function(e){ //console.log("mouse over:"); // console.log("X:" + e.offsetX +", Y:" + e.offsetY); }); $("#imgIc").mousedown(function(e){ x1 = e.offsetX; y1 = e.offsetY; }); $("#imgIc").mouseup(function(e){ x2 = e.offsetX; y2 = e.offsetY; console.log("x1,y1,x2,y2:"+x1+","+y1+","+x2+","+y2); var width = x2-x1; var height = y2-y1; ctx.clearRect(0, 0, canvasIcPhoto.width, canvasIcPhoto.height); ctx.drawImage(imgIc,x1,y1,width,height,0,0,width,height); });