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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js登录弹出层特效
Mar 07 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
详解Vue数据驱动原理
Nov 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
域名查询代码公布
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python变量赋值的秘密分享
2018/04/03 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
小学生开学感言
2014/02/28 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
委托培训协议书
2014/11/17 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python