這個(gè)是我改造的，在IE瀏覽器也可以放大最邊緣的地方，不需要判斷sx和dx，可以是任意大小的圖片

var?canvas?=?document.querySelector("#canvas");
var?cxt?=?canvas.getContext("2d");

var?offCanvas?=?document.createElement("canvas");
var?offCxt?=?offCanvas.getContext("2d");

var?img?=?new?Image();
var?isMouseDown?=?false;

var?scale?=?2;

window.addEventListener("load",function(){
	img.src?=?"images/a.jpg";
	img.addEventListener("load",function?()?{
????????canvas.width?=?img.naturalWidth;
????????canvas.height?=?img.naturalHeight;
????????cxt.drawImage(img,0,0,canvas.width,canvas.height);
????},false);
},false);

function?windowToCanvas(x,?y){
	var?bbox?=?canvas.getBoundingClientRect();
	return?{
		"x":?x?-?bbox.left,
		"y":?y?-?bbox.top
	};
}

canvas.addEventListener("mousedown",function(event){
	event.preventDefault();
	var?point?=?windowToCanvas(event.clientX,?event.clientY);
	isMouseDown?=?true;
	
	drawCanvasWithMagnifier(isMouseDown,point);
	
},false);

canvas.addEventListener("mousemove",function(event){
	event.preventDefault();
	if(isMouseDown){
		var?point?=?windowToCanvas(event.clientX,?event.clientY);
		drawCanvasWithMagnifier(isMouseDown,point);
	}
},false);

canvas.addEventListener("mouseup",function(event){
	event.preventDefault();
	isMouseDown?=?false;
	drawCanvasWithMagnifier(isMouseDown);
},false);

canvas.addEventListener("mouseleave",function(event){
	event.preventDefault();
	isMouseDown?=?false;
	drawCanvasWithMagnifier(isMouseDown);
},false);

function?drawCanvasWithMagnifier(isShowMagnifier,?point){
	cxt.clearRect(0,0,canvas.width,canvas.height);
	cxt.drawImage(img,0,0,canvas.width,canvas.height);
	if(isShowMagnifier){
		drawMagnifier(point);
	}
}
function?drawMagnifier(point){
	var?imgWidth?=?img.naturalWidth*scale;
	var?imgHeight?=?img.naturalHeight*scale;
	var?mr?=?200;
	
	var?sx?=?-point.x*scale+mr;
	var?sy?=?-point.y*scale+mr;
	
	var?dx?=?point.x?-?mr;
	var?dy?=?point.y?-?mr;
	
	offCanvas.width?=?2*mr;
	offCanvas.height?=?2*mr;
	offCxt.drawImage(img,sx,sy,imgWidth,imgHeight);
	
	
	cxt.save();
	cxt.lineWidth?=?10;
	cxt.strokeStyle?=?"#069";
	cxt.beginPath();
	cxt.arc(point.x,point.y,mr,0,2*Math.PI,false);
	cxt.stroke();
	cxt.clip();
	cxt.drawImage(offCanvas,dx,dy,2*mr,2*mr);
	
	cxt.restore();
}

在firefox與IE下都有這問(wèn)題，感謝思路

應(yīng)該再加多兩句

dx = dx<0?0:dx;
dy = dy<0?0:dy;

已經(jīng)解決了，在微軟的瀏覽器下drawImage的sx和sy小于0的時(shí)候會(huì)報(bào)錯(cuò)，要在drawImage
之前加多兩句

sx = sx<0?0:sx;
sy = sy<0?0:sy;