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>

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

Javascript 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JS 遮照层实现代码
Mar 31 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
angular之ng-template模板加载
Nov 09 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
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
You might like
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
javascript 面向对象 function类
2010/05/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python多线程原理与用法详解
2018/08/20 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
基于python3生成标签云代码解析
2020/02/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
社区工作者思想汇报
2014/01/13 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2015年中秋节主持词
2015/07/30 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS