您的位置:首页 > Web前端 > JavaScript

Javascript canvas 拖动鼠标截图

2017-12-16 21:12 295 查看
使用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);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: