canvas离屏技术与放大镜实现

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

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

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

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

实现水印和中心缩放
实现放大镜

1. 什么是离屏技术？

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

2. 实现水印和中心缩放

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

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Learn Canvas</title>

  <style>

    canvas {

      display: block;

      margin: 0 auto;

      border: 1px solid #222;

    }

    input {

      display: block;

      margin: 20px auto;

      width: 800px

    }

  </style>

</head>

<body>

  <div id="app">

    <canvas id="my-canvas"></canvas>

    <input type="range" value="1.0" min="0.5" max="3.0" step="0.1">

    <canvas id="watermark-canvas" style="display: none;"></canvas>

  </div>

  <script type="text/javascript">

    window.onload = function () {

      var canvas = document.querySelector("#my-canvas")

      var watermarkCanvas = document.querySelector("#watermark-canvas")

      var slider = document.querySelector("input")

      var scale = slider.value

      var ctx = canvas.getContext('2d')

      var watermarkCtx = watermarkCanvas.getContext("2d")

      /* 给第二个canvas获取的Context对象添加水印 */

      watermarkCanvas.width = 300

      watermarkCanvas.height = 100

      watermarkCtx.font = "bold 20px Arial"

      watermarkCtx.lineWidth = "1"

      watermarkCtx.fillStyle = "rgba(255 , 255 , 255, 0.5)"

      watermarkCtx.fillText("=== yuanxin.me ===", 50, 50)

      /****************************************/

      var img = new Image()

      img.src = "./img/photo.jpg"

      /* 加载图片后执行操作 */

      img.onload = function () {

        canvas.width = img.width;

        canvas.height = img.height;

        drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);

        // 监听input标签的mousemove事件

        // 注意：mousemove实时监听值的变化，内存消耗较大

        slider.onmousemove = function () {

          scale = slider.value

          drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);

        }

      }

      /******************/

    }

    /**

    *

    * @param {Object} canvas 画布对象

    * @param {Object} ctx

    * @param {Object} img

    * @param {Number} scale 缩放比例

    * @param {Object} watermark 水印对象

    */

    function drawImageByScale(canvas, ctx, img, scale, watermark) {

      // 图像按照比例进行缩放

      var width = img.width * scale,

        height = img.height * scale

      // (dx, dy): 画布上绘制img的起始坐标

      var dx = canvas.width / 2 - width / 2,

        dy = canvas.height / 2 - height / 2

      ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 清空画布

      ctx.drawImage(img, dx, dy, width, height) // No2 重新绘制图像

      if (watermark) {

        // No3 判断是否有水印: 有, 绘制水印

        ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height)

      }

    }

  </script>

</body>

</html>

实现效果如下图所示：

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

3. 实现放大镜

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

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

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    canvas {

      display: block;

      margin: 0 auto;

      border: 1px solid #222;

    }

  </style>

</head>

<body>

  <canvas id="my-canvas"></canvas>

  <canvas id="off-canvas" style="display: none;"></canvas>

  <script>

    var isMouseDown = false,

      scale = 1.0

    var canvas = document.querySelector("#my-canvas")

    var offCanvas = document.querySelector("#off-canvas") // 离屏 canvas

    var ctx = canvas.getContext("2d")

    var offCtx = offCanvas.getContext("2d") // 离屏 canvas 的 Context对象

    var img = new Image()

    window.onload = function () {

      img.src = "./img/photo.jpg"

      img.onload = function () {

        canvas.width = img.width

        canvas.height = img.height

        offCanvas.width = img.width

        offCanvas.height = img.height

        // 计算缩放比例

        scale = offCanvas.width / canvas.width

        // 初识状态下, 两个canvas均绘制Image

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

        offCtx.drawImage(img, 0, 0, canvas.width, canvas.height)

      }

      // 鼠标按下

      canvas.onmousedown = function (event) {

        event.preventDefault() // 禁用默认事件

        var point = windowToCanvas(event.clientX, event.clientY) // 获取鼠标相对于 canvas 标签的坐标

        isMouseDown = true

        drawCanvasWithMagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图像

      }

      // 鼠标移动

      canvas.onmousemove = function (event) {

        event.preventDefault() // 禁用默认事件

        if (isMouseDown === true) {

          var point = windowToCanvas(event.clientX, event.clientY)

          drawCanvasWithMagnifier(true, point)

        }

      }

      // 鼠标松开

      canvas.onmouseup = function (event) {

        event.preventDefault() // 禁用默认事件

        isMouseDown = false

        drawCanvasWithMagnifier(false) // 不绘制离屏放大镜

      }

      // 鼠标移出canvas标签

      canvas.onmouseout = function (event) {

        event.preventDefault() // 禁用默认事件

        isMouseDown = false

        drawCanvasWithMagnifier(false) // 不绘制离屏放大镜

      }

    }

    /**

    * 返回鼠标相对于canvas左上角的坐标

    * @param {Number} x 鼠标的屏幕坐标x

    * @param {Number} y 鼠标的屏幕坐标y

    */

    function windowToCanvas(x, y) {

      var bbox = canvas.getBoundingClientRect() // bbox中存储的是canvas相对于屏幕的坐标

      return {

        x: x - bbox.x,

        y: y - bbox.y

      }

    }

    function drawCanvasWithMagnifier(isShow, point) {

      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空画布

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 在画布上绘制图像

      /* 利用离屏，绘制放大镜 */

      if (isShow) {

        var { x, y } = point

        var mr = 50 // 正方形放大镜边长

        // (sx, sy): 待放大图像的开始坐标

        var sx = x - mr / 2,

          sy = y - mr / 2

        // (dx, dy): 已放大图像的开始坐标

        var dx = x - mr,

          dy = y - mr

        // 将offCanvas上的(sx,sy)开始的长宽均为mr的正方形区域

        // 放大到

        // canvas上的(dx,dy)开始的长宽均为 2 * mr 的正方形可视区域

        // 由此实现放大效果

        ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr)

      }

      /*********************/

    }

  </script>

</body>

</html>

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

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

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

Windows桌面共享中一些常见的抓屏技术
1. BitBlt 我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, 它就能实现抓屏功能. 对于通过这种方式的抓屏, ...
Windows抓屏技术
Windows桌面共享中一些常见的抓屏技术 1. BitBlt 我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, ...
canvas知识02：图片放大镜效果
效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...
html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
DXGI快速截屏录屏技术
DXGI快速截屏录屏技术概述很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...
解析电子墨水屏技术（工作原理与LCD的区别）【转】
转自:https://blog.csdn.net/weixin_42509369/article/details/84646808 阅读电子书早已成为大家生活中一部分,方便轻巧的电子版书籍更便于携带, ...
Canvas清屏的实现
/** * Canvas清屏的操作 * * 參考资料: http://blog.csdn.net/lfdfhl/article/details/9076001 * */ private void cl ...
QQ群排名霸屏技术居然是这样简单
最近做了一些收费的QQ群,收多少钱,一块钱的入门费,也就是说进入我的QQ群必须要1块钱的会费. 我的QQ群主要是干嘛呢,放些电影,比如说市面上电影院,正在播放的,最新最热门的,火爆的一些电影. 先前呢 ...
方别《QQ群霸屏技术》，又见《QQ群建群细则》
规则,时刻变动;QQ群系列,咱们再来一轮. QQ群霸屏技术,你说建群貌似很菜,大家仿佛都知道,其实只知其一不知其二. QQ群类别群分类,常规的就以下几种. 普通群. 建群随意,偏个性化,一言不合就拉 ...

随机推荐

准备情人节礼物比写代码难？来看看IT直男给女友们的礼物
今天是情人节,据说IT直男在每个这样弥漫着恋爱气息的日子里都能把礼物送成"辣眼睛"现场,为了反(zheng)驳(shi)这个观点,小编特意走访了网易云的架构师.工程师.产品经理.程 ...
腾讯大数据之TDW计算引擎解析——Shuffle
转自 https://www.csdn.net/article/2014-05-19/2819831-TDW-Shuffle/1 摘要:腾讯分布式数据仓库基于开源软件Hadoop和Hive进行构建,T ...
[CocoaPods]制作CocoaPod
创建自己的CocoaPod非常简单.如果你已经有一个单独的组件,那么你就是最重要的.本指南概述了整个过程,本节中的其他指南更适合更高级用户. 我们建议让CocoaPods在这里努力工作.Running ...
用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
Win10下音频设备无法播放音乐问题定位
最近一直在调试音频设备,由于音频设备需要在不同的采样率下面转换,所以会经常导致我的win10无法播放和录音. 刚开始在网上搜了相关的知识,但是一直没找到有效的解决方案.后来,无奈之下,使用了微软的声音 ...
vue 自学笔记(七) 组件细节问题
前情提要: 这里盘点一下,组件细节的问题现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...
大数据项目相关技术栈（Hadoop周边技术）
J2EE 框架Spring 开发框架 + SSH or SSM Lucene 索引和查询IKAnalyzer 分词Webmagic 爬虫 ETL工具:KettleSqoop 结构化数据库-hadoop ...
列表list切片
list1 = [1, 2, 3, 4, 5, 6] list1[::-1] >>>[6, 5, 4, 3, 2, 1] list1[:3:-1] >>>[6, 5 ...
剑指offer【01】- 二维数组中的查找(Java)
在经历了春招各大公司的笔试题和面试官的血虐之后,决定要刷一些算法题了,不然连面试机会都没有. 而应对笔试和面试,比较出名的就是剑指offer的题目和LeetCode的题目了.剑指offer应对面试中的 ...
30 个java编程技巧
1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...