1. 程式人生 > >Javascript canvas 拖動滑鼠截圖

Javascript canvas 拖動滑鼠截圖

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