教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）canvas 离屏技术与放大镜实现。

更多讨论或者错误提交，也请移步。

利用canvas除了可以实现滤镜，还可以利用离屏技术放大镜功能。

为了方便讲解，本文分为 2 个应用部分：

  1. 实现水印和中心缩放
  2. 实现放大镜

1. 什么是离屏技术？

canvas 学习和滤镜实现介绍过drawImage接口。除了绘制图像，这个接口还可以：将一个canvas对象绘制到另一个canvas对象上。这就是离屏技术。

2. 实现水印和中心缩放

在代码中，有两个 canvas 标签。分别是可见与不可见。不可见的 canvas 对象上的 Context 对象，就是我们放置图像水印的地方。

更多详解，请看代码注释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Learn Canvas</title>
  6.   <style>
  7.     canvas {
  8.       display: block;
  9.       margin: 0 auto;
  10.       border: 1px solid #222;
  11.     }
  13.     input {
  14.       display: block;
  15.       margin: 20px auto;
  16.       width: 800px
  17.     }
  18.   </style>
  19. </head>
  20. <body>
  21.   <div id="app">
  22.     <canvas id="my-canvas"></canvas>
  23.     <input type="range" value="1.0" min="0.5" max="3.0" step="0.1">
  24.     <canvas id="watermark-canvas" style="display: none;"></canvas>
  25.   </div>
  26.   <script type="text/javascript">
  27.     window.onload = function () {
  28.       var canvas = document.querySelector("#my-canvas")
  29.       var watermarkCanvas = document.querySelector("#watermark-canvas")
  30.       var slider = document.querySelector("input")
  32.       var scale = slider.value
  34.       var ctx = canvas.getContext('2d')
  35.       var watermarkCtx = watermarkCanvas.getContext("2d")
  37.       /* 给第二个canvas获取的Context对象添加水印 */
  38.       watermarkCanvas.width = 300
  39.       watermarkCanvas.height = 100
  40.       watermarkCtx.font = "bold 20px Arial"
  41.       watermarkCtx.lineWidth = "1"
  42.       watermarkCtx.fillStyle = "rgba(255 , 255 , 255, 0.5)"
  43.       watermarkCtx.fillText("=== yuanxin.me ===", 50, 50)
  44.       /****************************************/
  46.       var img = new Image()
  47.       img.src = "./img/photo.jpg"
  49.       /* 加载图片后执行操作 */
  50.       img.onload = function () {
  51.         canvas.width = img.width;
  52.         canvas.height = img.height;
  53.         drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
  54.         // 监听input标签的mousemove事件
  55.         // 注意：mousemove实时监听值的变化，内存消耗较大
  56.         slider.onmousemove = function () {
  57.           scale = slider.value
  58.           drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
  59.         }
  60.       }
  61.       /******************/
  62.     }
  63.     /**
  64.     *
  65.     * @param {Object} canvas 画布对象
  66.     * @param {Object} ctx
  67.     * @param {Object} img
  68.     * @param {Number} scale 缩放比例
  69.     * @param {Object} watermark 水印对象
  70.     */
  71.     function drawImageByScale(canvas, ctx, img, scale, watermark) {
  72.       // 图像按照比例进行缩放
  73.       var width = img.width * scale,
  74.         height = img.height * scale
  75.       // (dx, dy): 画布上绘制img的起始坐标
  76.       var dx = canvas.width / 2 - width / 2,
  77.         dy = canvas.height / 2 - height / 2
  78.       ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 清空画布
  79.       ctx.drawImage(img, dx, dy, width, height) // No2 重新绘制图像
  80.       if (watermark) {
  81.         // No3 判断是否有水印: 有, 绘制水印
  82.         ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height)
  83.       }
  84.     }
  85.   </script>
  86. </body>
  87. </html>

实现效果如下图所示：

拖动滑竿，即可放大和缩小图像。然后右键保存图像。保存后的图像，就有已经有了水印，如下图所示：

3. 实现放大镜

在上述中心缩放的基础上，实现放大镜主需要注意以下 2 个部分：

  1. 细化处理canvas的鼠标响应事件：滑入、滑出、点击和松开
  2. 重新计算离屏坐标（详细公式计算思路请见代码注释）
  3. 重新计算鼠标相对于 canvas 标签的坐标（详细公式计算思路请见代码注释）

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.     canvas {
  8.       display: block;
  9.       margin: 0 auto;
  10.       border: 1px solid #222;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <canvas id="my-canvas"></canvas>
  16.   <canvas id="off-canvas" style="display: none;"></canvas>
  17.   <script>
  18.     var isMouseDown = false,
  19.       scale = 1.0
  20.     var canvas = document.querySelector("#my-canvas")
  21.     var offCanvas = document.querySelector("#off-canvas") // 离屏 canvas
  22.     var ctx = canvas.getContext("2d")
  23.     var offCtx = offCanvas.getContext("2d") // 离屏 canvas 的 Context对象
  24.     var img = new Image()
  26.     window.onload = function () {
  27.       img.src = "./img/photo.jpg"
  29.       img.onload = function () {
  30.         canvas.width = img.width
  31.         canvas.height = img.height
  33.         offCanvas.width = img.width
  34.         offCanvas.height = img.height
  36.         // 计算缩放比例
  37.         scale = offCanvas.width / canvas.width
  39.         // 初识状态下, 两个canvas均绘制Image
  40.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  41.         offCtx.drawImage(img, 0, 0, canvas.width, canvas.height)
  43.       }
  45.       // 鼠标按下
  46.       canvas.onmousedown = function (event) {
  47.         event.preventDefault() // 禁用默认事件
  48.         var point = windowToCanvas(event.clientX, event.clientY) // 获取鼠标相对于 canvas 标签的坐标
  49.         isMouseDown = true
  50.         drawCanvasWithMagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图像
  51.       }
  53.       // 鼠标移动
  54.       canvas.onmousemove = function (event) {
  55.         event.preventDefault() // 禁用默认事件
  56.         if (isMouseDown === true) {
  57.           var point = windowToCanvas(event.clientX, event.clientY)
  58.           drawCanvasWithMagnifier(true, point)
  59.         }
  60.       }
  62.       // 鼠标松开
  63.       canvas.onmouseup = function (event) {
  64.         event.preventDefault() // 禁用默认事件
  65.         isMouseDown = false
  66.         drawCanvasWithMagnifier(false) // 不绘制离屏放大镜
  67.       }
  69.       // 鼠标移出canvas标签
  70.       canvas.onmouseout = function (event) {
  71.         event.preventDefault() // 禁用默认事件
  72.         isMouseDown = false
  73.         drawCanvasWithMagnifier(false) // 不绘制离屏放大镜
  74.       }
  75.     }
  77.     /**
  78.     * 返回鼠标相对于canvas左上角的坐标
  79.     * @param {Number} x 鼠标的屏幕坐标x
  80.     * @param {Number} y 鼠标的屏幕坐标y
  81.     */
  82.     function windowToCanvas(x, y) {
  83.       var bbox = canvas.getBoundingClientRect() // bbox中存储的是canvas相对于屏幕的坐标
  84.       return {
  85.         x: x - bbox.x,
  86.         y: y - bbox.y
  87.       }
  88.     }
  90.     function drawCanvasWithMagnifier(isShow, point) {
  91.       ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空画布
  92.       ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 在画布上绘制图像
  94.       /* 利用离屏，绘制放大镜 */
  95.       if (isShow) {
  96.         var { x, y } = point
  98.         var mr = 50 // 正方形放大镜边长
  100.         // (sx, sy): 待放大图像的开始坐标
  101.         var sx = x - mr / 2,
  102.           sy = y - mr / 2
  104.         // (dx, dy): 已放大图像的开始坐标
  105.         var dx = x - mr,
  106.           dy = y - mr
  108.         // 将offCanvas上的(sx,sy)开始的长宽均为mr的正方形区域
  109.         // 放大到
  110.         // canvas上的(dx,dy)开始的长宽均为 2 * mr 的正方形可视区域
  111.         // 由此实现放大效果
  112.         ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr)
  113.       }
  114.       /*********************/
  115.     }
  116.   </script>
  117. </body>
  118. </html>

放大镜效果如下图所示(被红笔标出的区域就是我们的正方形放大镜)：

欢迎入群：857989948 。IT 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、UI 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。

canvas离屏技术与放大镜实现的更多相关文章

  1. Windows桌面共享中一些常见的抓屏技术

    1. BitBlt 我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, 它就能实现抓屏功能. 对于通过这种方式的抓屏, ...

  2. Windows抓屏技术

    Windows桌面共享中一些常见的抓屏技术 1. BitBlt   我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, ...

  3. canvas知识02：图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

  4. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  5. DXGI快速截屏录屏技术

    DXGI快速截屏录屏技术 概述   很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...

  6. 解析电子墨水屏技术（工作原理与LCD的区别）【转】

    转自:https://blog.csdn.net/weixin_42509369/article/details/84646808 阅读电子书早已成为大家生活中一部分,方便轻巧的电子版书籍更便于携带, ...

  7. Canvas清屏的实现

    /** * Canvas清屏的操作 * * 參考资料: http://blog.csdn.net/lfdfhl/article/details/9076001 * */ private void cl ...

  8. QQ群排名霸屏技术居然是这样简单

    最近做了一些收费的QQ群,收多少钱,一块钱的入门费,也就是说进入我的QQ群必须要1块钱的会费. 我的QQ群主要是干嘛呢,放些电影,比如说市面上电影院,正在播放的,最新最热门的,火爆的一些电影. 先前呢 ...

  9. 方别《QQ群霸屏技术》，又见《QQ群建群细则》

    规则,时刻变动;QQ群系列,咱们再来一轮. QQ群霸屏技术,你说建群貌似很菜,大家仿佛都知道,其实只知其一不知其二. QQ群类别 群分类,常规的就以下几种. 普通群. 建群随意,偏个性化,一言不合就拉 ...

随机推荐

  1. tarjan求强连通分量+缩点+割点/割桥（点双/边双）以及一些证明

    “tarjan陪伴强联通分量 生成树完成后思路才闪光 欧拉跑过的七桥古塘 让你 心驰神往”----<膜你抄>   自从听完这首歌,我就对tarjan开始心驰神往了,不过由于之前水平不足,一 ...

  2. ESB结合门户Portlet实现数据分析

    1 背景概述 笔者在公司做集成项目时,通常会涉及ESB与Portal结合实现图表数据分析功能.通过ESB获取数据库信息,然后在门户上采用Portlet接收ESB中的数据URL最后展现到门户上.本文为项 ...

  3. MyBatis 源码分析 - SQL 的执行过程

    * 本文速览 本篇文章较为详细的介绍了 MyBatis 执行 SQL 的过程.该过程本身比较复杂,牵涉到的技术点比较多.包括但不限于 Mapper 接口代理类的生成.接口方法的解析.SQL 语句的解析 ...

  4. Linux下Redis安装使用教程

    https://redis.io/download 第一步:安装redis需要在有c语言的编译环境下,执行命令安装c语言环境: yum install gcc-c++ https://blog.csd ...

  5. HTML和CSS使用注意事项

    HTML 1.button标签 在IE中,button标签默认的type是button,而在其他浏览器和W3C标准中button默认的属性都是submit. 所以,在一个form表单中,如果butto ...

  6. scikit-image 图像处理库介绍

    今天学习图像处理的时候,无意中看到了scikit 软件包,抱着学习的态度,这里做个记录,方便以后翻阅. 概念:scikit-image 是一种开源的用于图像处理的 Python 包.它包括分割,几何变 ...

  7. 机器学习与Tensorflow（4）——卷积神经网络与tensorflow实现

    1.标准卷积神经网络 标准的卷积神经网络由输入层.卷积层(convolutional layer).下采样层(downsampling layer).全连接层(fully—connected laye ...

  8. 【译】使用 ndb 调试 node 应用

    原文链接:Debugging Node.js Application Using ndb Google Chrome 实验室发布了一款新的 node debug 工具来提升开发者体验,本文将会全面介绍 ...

  9. mysql: [ERROR] unknown variable 'datadir=/var/lib/mysql'问题

    环境: Centos7,mysql 5.7 问题: 在使用命令“mysql -u root -p”连接mysql时,报:“mysql: [ERROR] unknown variable 'datadi ...

  10. Gradle中使用SpringBoot插件构建多模块遇到的问题

    通常下,多模块的项目如下: Root project 'demospring' +--- Project ':model' \--- Project ':rest' 那么我们需要在rest模块依赖mo ...