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 相关文章推荐
RequireJS入门一之实现第一个例子
Sep 30 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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实现多进程并行执行脚本
2013/06/18 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python读写二进制文件的方法
2015/05/09 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
深入理解Django-Signals信号量
2019/02/19 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
校长就职演讲稿
2014/01/06 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
四风之害观后感
2015/06/09 职场文书
婚宴新郎致辞
2015/07/28 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript