canvas实现图像放大镜


Posted in Javascript onFebruary 06, 2017

 本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-放大镜</title> 
  <style> 
    body{ 
      padding: 0px; 
      margin: 0px; 
    } 
    #canvas{ 
      border: 1px solid red; 
      margin: 100px; 
    } 
  </style> 
</head> 
<body> 
  <canvas id="canvas" width="800px" height="500px"> 
  </canvas> 
  <script> 
    //获取到canvas元素 
    var canvas = document.getElementById('canvas'); 
    //获取canvas中的画图环境 
    var context = canvas.getContext('2d'); 
 
    var img = new Image(); 
    img.src = "./image/liuyifei.jpg"; 
 
    window.onload = function(){ 
      //获取放大镜 
      getfangdajing(context,canvas,img,150,2); 
    } 
 
    /* 
    *  context:绘制环境对象, 
    *  element:canvas元素对象 
    *  img:图片对象 
    *  diameter:放大镜的大小, 
    *  ratio:图形的放大比例, 
    * (比例 = 原图 :镜中图像)0<ratio<1缩小图像,ratio>1放大图像 
    * */ 
    function getfangdajing(context,element,img,diameter,ratio){ 
      //绘制图片 
      context.drawImage(img,0,0,element.width,element.height); 
      //鼠标在element中移动触发事件 
      element.onmousemove = function (e){ 
        context.clearRect(0,0,element.width,element.height); 
        //绘制图片 
        context.drawImage(img,0,0,element.width,element.height); 
        //解决浏览器兼容问题 
        var e = e ? e : window.event; 
        //获取鼠标在element元素中的坐标值 
        var cxy = windowToCanvas(element,e.clientX,e.clientY); 
        context.save();//保存当前绘制环境 
        //获取放大镜 
        getClip(context,cxy.x,cxy.y,diameter/2); 
        //将内容放入到放大镜中显示 
        //根据鼠标点的坐标值计算出在原图的坐标值 
        var ytx0=img.width/element.width*cxy.x;//计算出鼠标在原图的X坐标值 
        var yty0=img.height/element.height*cxy.y//计算出鼠标在原图的Y坐标值 
        //(原图形/显示图形比例)* (放大镜直径/比例= 镜中的图形所占大小)= 原图要截取的图像大小 
        var ytclipValueW = img.width/element.width*diameter/ratio;//在原图截取图片的宽度 
        var ytclipValueH = img.height/element.height*diameter/ratio;//在原图截取图片的宽度 
        //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度, 
        // 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度); 
        context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter); 
        context.restore();//恢复当前保存的绘制环境 
      } 
    } 
 
    /* 
    * 获取放大镜框:进行图层切割 
    * context:绘制环境对象 
    * x:鼠标在画布中的X坐标 
    * y:鼠标在画布中的Y坐标 
    * r:放大镜的直径 
    * */ 
    function getClip(context,x,y,r){ 
      context.beginPath(); 
      context.arc(x,y,r,0,Math.PI*2,false); 
      context.stroke(); 
      context.clip();//沿形状切除向外的图层 
    } 
 
 
    /* 
    * 坐标转换:将window中的坐标转换到元素盒子中的坐标,并返回(x,y)坐标 
    * element:canvas元素对象 
    * x:鼠标在当前窗口X坐标值 
    * y:鼠标在当前窗口Y坐标值 
    * */ 
    function windowToCanvas(element,x,y){ 
      //获取当前鼠标在window中的坐标值 
      // alert(event.clientX+"-------"+event.clientY); 
      //获取元素的坐标属性 
      var box = element.getBoundingClientRect(); 
      var bx = x - box.left; 
      var by = y - box.top; 
      return {x:bx,y:by}; 
    } 
 
  </script> 
</body> 
</html>

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

Javascript 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
javascript对象的创建和访问
Mar 08 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
微信小程序 video组件详解
Oct 25 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 #Javascript
jQuery快速实现商品数量加减的方法
Feb 06 #Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 #Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php读取3389的脚本
2014/05/06 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
电焊工工作岗位职责
2014/02/06 职场文书
警校毕业生自我评价
2014/04/06 职场文书
员工教育培训协议书
2014/09/27 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
高中家长意见怎么写
2015/06/03 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
浅谈Python协程asyncio
2021/06/20 Python