Javascript canvas 拖动鼠标截图

来源:互联网 发布:windows ftp登录命令 编辑:程序博客网 时间:2024/05/22 21:32

使用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);});

原创粉丝点击