js canvas实现放大镜查看图片功能

最新推荐文章于 2021-03-14 00:10:36 发布

许由务光

最新推荐文章于 2021-03-14 00:10:36 发布

阅读量586

点赞数 1

分类专栏： js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js canvas实现放大镜查看图片功能

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body style="background: black;">
<canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa ">
  你的浏览器不支持canvas
</canvas>
<canvas id="offCanvas" style="display: none"></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas");
  var context = myCanvas.getContext("2d");
 
  var offCanvas = document.getElementById("offCanvas");
  var offContext = offCanvas.getContext("2d");
 
  var isMouseDown = false;
  var scale;
 
  var image = new Image();
 
  window.onload = function () {
 
    myCanvas.width = 300;
    myCanvas.height = 200;
 
    image.src = "1.jpg";
 
    image.onload = function () {
 
      offCanvas.width = image.width;
      offCanvas.height = image.height;
      scale = offCanvas.width / myCanvas.width ;
 
      context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
      offContext.drawImage(image,0,0);
 
    }
 
  };
  function windowToCanvas(x,y) {
    var bbox = myCanvas.getBoundingClientRect();
    return { x : x - bbox.left , y : y - bbox.top};
  }
  myCanvas.onmousedown = function (e) {
    e.preventDefault();
    var point = windowToCanvas(e.clientX , e.clientY);
    console.log(point);
    isMouseDown = true;
    drawCanvasWithMagnifier( true , point );
  };
  myCanvas.onmousemove = function (e) {
    e.preventDefault();
    if (isMouseDown ){
      var point = windowToCanvas(e.clientX , e.clientY);
      drawCanvasWithMagnifier( true , point );
    }
  };
  myCanvas.onmouseup = function (e) {
    e.preventDefault();
    isMouseDown = false;
    drawCanvasWithMagnifier( false );
  };
  myCanvas.onmouseout = function (e) {
    e.preventDefault();
    isMouseDown = false;
    drawCanvasWithMagnifier( false );
  };
  function drawCanvasWithMagnifier( isShowMagnifier , point) {
    context.clearRect(0,0,myCanvas.width,myCanvas.height);
    context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
    if(isShowMagnifier == true ){
      drawMagnifier( point );
    }
  }
  function drawMagnifier( point ) {
    var imageLG_cx = point.x * scale ;
    var imageLG_cy = point.y * scale ;
 
    var mr = 20 ;
 
    var sx = imageLG_cx - mr ;
    var sy = imageLG_cy - mr ;
 
    var dx = point.x - mr ;
    var dy = point.y - mr ;
 
    context.save();
 
    context.lineWidth = 5.0;
    context.strokeStyle = "#069";
 
 
    context.beginPath();
    context.arc(point.x,point.y,mr,0,Math.PI*2);
    context.stroke();
 
    context.clip();
 
    context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
    context.restore();
  }
</script>
</body>
</html>