编程 Javascript

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

Posted in Javascript onJune 08, 2017

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

我在世界的尽头想你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

THREE.JS入门教程(6)创建自己的全景图实现步骤

Jan 25 Javascript

JS常用字符串处理方法应用总结

May 22 Javascript

javascript动态获取登录时间和在线时长

Feb 25 Javascript

全面介绍javascript实用技巧及单竖杠

Jul 18 Javascript

浅谈JS继承_寄生式继承 & 寄生组合式继承

Aug 16 Javascript

利用Jquery队列实现根据输入数量显示的动画

Sep 01 Javascript

ng-options和ng-checked在表单中的高级运用(推荐)

Jan 21 Javascript

vue拦截器Vue.http.interceptors.push使用详解

Apr 22 Javascript

angularjs利用directive实现移动端自定义软键盘的示例

Sep 20 Javascript

24个解决实际问题的ES6代码片段(小结)

Feb 02 Javascript

node运行js获得输出的三种方式示例详解

Jul 02 Javascript

vue3 watch和watchEffect的使用以及有哪些区别

Jan 26 Vue.js

vue实现一个移动端屏蔽滑动的遮罩层实例

Jun 08 #Javascript

微信小程序开发之map地图实现教程

Jun 08 #Javascript

详解AngularJS用Interceptors来统一处理HTTP请求和响应

Jun 08 #Javascript

微信小程序开发之实现自定义Toast弹框

Jun 08 #Javascript

微信小程序开发之toast等弹框提示使用教程

Jun 08 #Javascript

javascript实现二叉树遍历的代码

Jun 08 #Javascript

微信小程序tabbar不显示解决办法

Jun 08 #Javascript