4回答

• 

  杜新明

  2016-11-23 16:56:22

  这个是我改造的，在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 0
• 

  向右滚

  2015-12-14 16:29:08

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

  0 0
• 

  血翼才轩_

  2015-08-31 18:47:57

  应该再加多两句

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

  0 1
• 

  血翼才轩_

  2015-08-31 18:44:31

  已经解决了，在微软的浏览器下drawImage的sx和sy小于0的时候会报错，要在drawImage
  之前加多两句

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

  2 0

  爱慕之夏

  呃呃，对dx，dy都做了判断就好了

  2015-09-06 20:37:24

  共 2 条回复 >