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 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php图片添加水印例子
2016/07/20 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Python中字符串的格式化方法小结
2016/05/03 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python线程同步的实现代码
2018/10/03 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
详解Django 时间与时区设置问题
2019/07/23 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
事业单位辞职信范文
2014/01/19 职场文书
质量月口号
2014/06/20 职场文书
2015年女生节活动总结
2015/02/27 职场文书
小升初自荐信范文
2015/03/05 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
初中思想品德教学反思
2016/02/24 职场文书