PM 說: 身分證在前端加上浮水印如何實現?

2024 iThome 鐵人賽

DAY 19

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 19 篇

16th鐵人賽

YUAN

2024-09-16 22:24:31

9 瀏覽

分享至

前言

封面圖是蠻常看見的身分證上傳押上浮水印
今天來實現這個功能的MVP

成果

上傳圖片前端加上浮水印文字，並限制圖片大小 dmeo

說明

今天的功能其實蠻進階的
關於檔案相關的轉換留到之後的文章再來談，有興趣的讀者可以先看看這篇

實現的流程:

監聽 input "change" 事件
取得圖片檔案(file)
圖片轉 Bitmap
將 Bitmap 丟到 canvas 做文字加工
canvasToBlob
blobToBase64
將Base64圖片渲染到畫面上

重點1 createImageBitmap

const img = await createImageBitmap(file);

createImageBitmap() 文件
createImageBitmap 比 new Image() 效能好一些
參考: https://blog.csdn.net/qq_38913715/article/details/112346199

重點2 設置圖片最大寬度和高度

邏輯: 先判斷上傳的圖片寬度or高度是否超過最大值 => 是的話要做比例縮放

舉例:
假設有圖片是 1500x600
計算縮放比例 Math.min(300/1500, 300/600) = Math.min(0.2, 0.5) = 0.2
故
width = 1500x0.2 = 300
height = 600x0.2 = 120

        // 設置最大寬度和高度
        const maxWidth = 300;
        const maxHeight = 300;
        // 計算圖片縮放比例
        let width = img.width;
        let height = img.height;
        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.min(maxWidth / width, maxHeight / height);
          width = width * ratio;
          height = height * ratio;
        }
        // 設置canvas的大小
        canvas.width = width;
        canvas.height = height;

重點3 canvas語法

這部分就是看語法做事了

在canvas畫圖(要指定大小)
在canvas押上文字

drawImage() 文件
 fillText() 文件

        // 繪製圖片
        ctx.drawImage(img, 0, 0, width, height);
        // 樣式設定
        ctx.font = "30px Arial";
        ctx.fillStyle = "rgba(255, 255, 0, 0.9)"; // 白色半透明
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        // 繪製浮水印文字 放在中間
        ctx.fillText("我是浮水印", width / 2, height / 2);

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upload Image + WaterMark</title>
  </head>
  <body>
    <input type="file" id="upload" accept="image/*" />
    <canvas id="canvas" style="display: none"></canvas>
    <img src="" alt="" id="myImage" />

    <script>
      // 將 canvas 轉換為 Blob
      const canvasToBlob = (canvas, fileType) => {
        return new Promise((resolve) => {
          canvas.toBlob((blob) => {
            resolve(blob);
          }, fileType);
        });
      };
      // 將 Blob 轉換為 Base64字串
      const blobToBase64 = (blob) => {
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.readAsDataURL(blob);
        });
      };

      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const uploadInput = document.getElementById("upload");
      const myImage = document.getElementById("myImage");

      uploadInput.addEventListener("change", async (event) => {
        const file = event.target.files[0];
        const img = await createImageBitmap(file);
        // img 處理浮水印
        handleCanvasWaterMark(img);

        const blobFile = await canvasToBlob(canvas, file.type);
        const base64 = await blobToBase64(blobFile);
        // base64 修改圖片src
        myImage.src = base64;

        // 若想要回傳圖片給後端也可以將 Blob 轉換為 File
      });

      function handleCanvasWaterMark(img) {
        // 設置最大寬度和高度
        const maxWidth = 300;
        const maxHeight = 300;
        // 計算圖片縮放比例
        let width = img.width;
        let height = img.height;
        if (width > maxWidth || height > maxHeight) {
          const ratio = Math.min(maxWidth / width, maxHeight / height);
          width = width * ratio;
          height = height * ratio;
        }
        // 設置canvas的大小
        canvas.width = width;
        canvas.height = height;

        // 繪製圖片
        ctx.drawImage(img, 0, 0, width, height);
        // 繪製浮水印文字
        ctx.font = "30px Arial";
        ctx.fillStyle = "rgba(255, 255, 0, 0.9)"; // 白色半透明
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("我是浮水印", width / 2, height / 2);
      }
    </script>
  </body>
</html>

祝大家中秋佳節愉快~