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 03 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
javascript学习之json入门
Dec 22 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
详解小程序循环require之坑
Mar 08 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
js脚本实现数据去重
2014/11/27 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
路政管理毕业自荐书范文
2014/02/10 职场文书
元旦联欢会感言
2014/03/04 职场文书
大学生毕业求职信
2014/06/12 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL