App下載

在html中怎么使用canvas實現(xiàn)離屏技術與放大鏡效果?相關案例代碼分享!

猿友 2021-07-16 10:31:50 瀏覽數 (2239)
反饋

今天小編為大家分享一篇有關于:“在html中怎么使用canvas實現(xiàn)離屏技術與放大鏡效果?”這個問題的整理的相關內容,希望對大家的了解和學習有所幫助!

利用 canvas 除了可以實現(xiàn)濾鏡,還可以利用 離屏技術 放大鏡功能。

為了方便講解,本文分為 2 個應用部分:

  • 實現(xiàn)水印和中心縮放
  • 實現(xiàn)放大鏡

 1. 什么是離屏技術?

canvas 學習和濾鏡實現(xiàn) 介紹過 drawImage 接口。除了繪制圖像,這個接口還可以: 將一個 canvas 對象繪制到另一個 canvas 對象上 。這就是離屏技術。

2. 實現(xiàn)水印和中心縮放

在代碼中,有兩個 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"

      /* 加載圖片后執(zhí)行操作 */
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
        // 監(jiān)聽input標簽的mousemove事件
        // 注意:mousemove實時監(jiān)聽值的變化,內存消耗較大
        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>

實現(xiàn)效果如下圖所示:

效果圖

拖動滑竿,即可放大和縮小圖像。然后右鍵保存圖像。保存后的圖像,就有已經有了水印,如下圖所示:

放大之后的效果圖

3. 實現(xiàn)放大鏡

在上述中心縮放的基礎上,實現(xiàn)放大鏡主需要注意以下 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

        // 初識狀態(tài)下, 兩個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的正方形區(qū)域
        // 放大到
        // canvas上的(dx,dy)開始的長寬均為 2 * mr 的正方形可視區(qū)域
        // 由此實現(xiàn)放大效果
        ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr)
      }
      /*********************/
    }
  </script>
</body>
</html>

放大鏡效果如下圖所示(被紅筆標出的區(qū)域就是我們的正方形放大鏡):

那么在讀完小編分享的這篇文章的時候相信大家對:“在html中怎么使用canvas實現(xiàn)離屏技術與放大鏡效果?”這個問題就有了不少的了解,那么更多有關于html5這方面的相關內容和知識我們都可以在W3Cschool中進行學習和了解。


0 人點贊