canvas离屏技术与放大镜实现

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

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

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

为了方便讲解,本文分为 2 个应用部分:

  1. 实现水印和中心缩放
  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 个部分:

  1. 细化处理canvas的鼠标响应事件:滑入、滑出、点击和松开
  2. 重新计算离屏坐标(详细公式计算思路请见代码注释)
  3. 重新计算鼠标相对于 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 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流,欢迎热衷记录知识的您的加入。

原文地址:https://www.cnblogs.com/geyouneihan/p/9562472.html

时间: 2024-10-08 02:43:03

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

canvas知识02:图片放大镜效果

效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cxt01 = cav01.getContext('2d'); // 初始化canvas02和上下文环境 var cav02 = document.getElementById('cav02'); var cxt02 = cav02.getContext('2d'); //初始化image对象和缩放比例 var

Windows抓屏技术

Windows桌面共享中一些常见的抓屏技术 1. BitBlt   我想做Windows开发应该都知道这个API, 它能实现DC间的内容拷贝, 如果我们把源DC指定成Monitor DC或是桌面DC, 它就能实现抓屏功能. 对于通过这种方式的抓屏, 有2点需要特别提醒: a. 在XP下我们可以通过最后的拷贝标志来控制是否拷贝layered window, 只有SRCCPY表示拷贝内容不包含layered window, 如果是SRCCPY | CAPTUREBLT表示拷贝包括Layered wi

吐血分享:QQ群霸屏技术教程2017(问题篇)

霸屏技术,问题篇后,暂时搁置,尔望后续. 这里针对操作中,经常遇到的问题,做个简单整理. 回忆下,排名流程. 1.建群,品牌产品群,做任何关键词都是品牌产品群,皆因其有独特的优势. 2.拉人,填充群人数. 3.优化,关键词细节处理好. 4.解散,拉人的后置问题,解散,然后恢复,恢复后群介绍是空白的,2个小时后,完善好资料,再隔5个小时,重新用定位软件,整体的把群(介绍.名称.位置.分类)修改一遍. 排名,其后就坐等排名,80%的行业这个方式就可以做上首页. 5.竞争度的原因,可能排不上来,这个时

吐血分享:QQ群霸屏技术教程(利润篇)

QQ群技术,不论日进几百,空隙时间多的可以尝试,日进100问题不大. QQ群技术,如何赚钱,能赚多少钱?不同行业,不同关键词,不同力度,不一样的产出. 群费 群费,这个和付费群是有区别的,群费在手机端显示. QQ群费,这个常见于一些兴趣群.同城群之类的,等同于份子钱,比如聚个会,结伴游啥的. 1.手机端,以群主的身份点开自己的群. 2.点击右上角的群成员图标. 3.点击更多,进入群应用,找到群费. 4.点击发布群费,设置金额. 5.群费发布后,会显示到QQ群中,这个操作只有群主可以做. 群费,这

方别《QQ群霸屏技术》,又见《QQ群建群细则》

规则,时刻变动;QQ群系列,咱们再来一轮. QQ群霸屏技术,你说建群貌似很菜,大家仿佛都知道,其实只知其一不知其二. QQ群类别 群分类,常规的就以下几种. 普通群. 建群随意,偏个性化,一言不合就拉人进群,营销的话大多分类会选择品牌产品,这个是霸屏系列的核心推荐. 普通群,是前期笔者对霸屏系列常规的基础打法,规则背后,咱慢慢完善. 同城群. 三类:私密群.同城群.兴趣群. 同城群会被推荐,但是如果没运营,后续不会被推荐.隔三差五的互动,市场的打理,是必须的. 2.1.推荐 群地点附近,附近的群

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

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

苹果手机的投屏技术

今天尝试了一下苹果手机的投屏技术感觉挺好玩的,下面我来分享一下怎样实现的投屏效果(我的手机为iphone) (1)首先,从网络上下载苹果录屏大师这个软件(网址:http://www.itools.cn/),下载到电脑上. 下载好后的图标如图所示: (我在玩耍这个软件的时候还下载了下面的这个东西<系统提示安装>) (2)在手机App商店中下载苹果投影助手,然后打开软件按照软件中的提示步骤来就行. 点击连接助手会出现一个二维码,使用屏幕投影助手扫描即可 在完成此步骤需要满足一个必要条件: 保证手机

吐血分享:QQ群霸屏技术教程(接单篇)

在文章<QQ群霸屏技术教程(利润篇)>中,阿力推推提及到QQ群霸屏技术变现的方式,稍显粗略,这里详尽介绍下(老鸟漂过). 资本 资本之上,才谈得上接单,没技能,接个毛线. 1擅长点. 建议从擅长的点上扩展,深挖更有效,不一定非要涉猎QQ群. 我去,你让我看你QQ群系列文章,而不接QQ群单子,干啥,调戏我呀.少侠,老夫不敢,不接QQ群单,了解下这个逻辑,还是有益的. 任何游戏规则,核心思路都差不多,表现路径和方式套路不同罢了. 于QQ群,别人能上排名,你不能上,勿怪平台,不断打磨吧. 2资源号.

吐血分享:QQ群霸屏技术教程2017(活跃篇)

热门词的群排名,在前期优化准备充分的情况下,活跃度不失为必杀技. 在<吐血分享:QQ群霸屏技术(初级篇)>中,我们提及到热门词的群排名,有了前面的基础,我们就可以进入深度优化,实现绝对的霸屏. 前期优化,一定要充分完善,基础优化和内部优化绝不马虎,否则刷活跃度毫无意义. 针对词汇. 深度优化,这种方式一般关键词用不到,只有很热的词才会用到. 人数拉起来,一般的关键词,就可以靠前,如果不行,再刷活跃度. 北京租房,这个关键词现有的群排名,几乎都是优化过的.这么多对手,我们要靠前,就必须做深度优化