JS 如何在图片上叠加水印或蒙版以增加复杂性

32 min read

在 JavaScript 中，可以使用 Canvas API 来在图片上叠加水印或蒙版。

以下是一个简单的例子，演示如何使用 Canvas API 在图片上添加一个水印：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Watermark example</title>
  </head>
  <body>
    <img src="image.jpg" alt="Original image">
    <canvas id="watermark"></canvas>
    <script>
      const canvas = document.getElementById("watermark");
      const ctx = canvas.getContext("2d");
      const img = document.querySelector("img");

      // 将画布的大小设置为图片的大小
      canvas.width = img.width;
      canvas.height = img.height;

      // 在画布上绘制原始图片
      ctx.drawImage(img, 0, 0);

      // 添加文本水印
      ctx.font = "20px Arial";
      ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
      ctx.textAlign = "center";
      ctx.fillText("Watermark", canvas.width / 2, canvas.height / 2);

      // 将水印叠加到原始图片上
      img.src = canvas.toDataURL();
    </script>
  </body>
</html>

在上面的例子中，我们首先创建了一个包含原始图片和一个 Canvas 元素的 HTML 页面。然后，我们使用 Canvas API 在画布上绘制原始图片，并在画布上叠加了一个文本水印。最后，我们将画布的内容转换为 base64 编码的图片数据，并将其设置为原始图片的源，以便在页面上显示叠加水印后的图片。

类似的，你也可以使用 Canvas API 创建一个蒙版，然后将其叠加到原始图片上以增加复杂性。