为了账号安全,请及时绑定邮箱和手机立即绑定

用微软的浏览器会报错

用微软的浏览器会报错,当鼠标移到边缘时报IndexSizeError,这是什么鬼?参考浏览器为IE11和edge

http://img1.sycdn.imooc.com//55e42c890001661203450416.jpg

正在回答

6 回答

这个是我改造的,在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();
}


0 回复 有任何疑惑可以回复我~

在firefox与IE下都有这问题,感谢思路

0 回复 有任何疑惑可以回复我~

应该再加多两句

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

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

用微软的浏览器会报错

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信