canvas 添加水印

🚀 使用 Canvas 给图片添加水印

在 Web 开发中，给图片添加水印可以使用 Canvas API，这样可以确保水印不会被轻易移除，同时不会影响图片的清晰度。

---

📌 1. 使用 Canvas 给图片添加水印（基础版）

✅ 示例：在图片右下角添加水印

<canvas id="watermarkCanvas"></canvas>
<img id="outputImage" />

<script>
  function addWatermarkToImage(imageSrc, watermarkText) {
    const img = new Image();
    img.crossOrigin = "anonymous"; // 处理跨域问题
    img.src = imageSrc;

    img.onload = () => {
      const canvas = document.getElementById("watermarkCanvas");
      const ctx = canvas.getContext("2d");

      // 设置 Canvas 大小
      canvas.width = img.width;
      canvas.height = img.height;

      // 绘制原始图片
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 设置水印样式
      ctx.font = "36px Arial";
      ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // 半透明白色
      ctx.textAlign = "right";
      ctx.textBaseline = "bottom";

      // 添加水印（放在右下角）
      ctx.fillText(watermarkText, canvas.width - 20, canvas.height - 20);

      // 获取最终带水印的图片
      const outputImg = document.getElementById("outputImage");
      outputImg.src = canvas.toDataURL("image/png");
    };
  }

  // 使用示例
  addWatermarkToImage("https://picsum.photos/600/400", "Confidential");
</script>

📌 说明

• drawImage()：绘制原始图片到 Canvas 上。
• fillText()：在 Canvas 上绘制文本水印。
• toDataURL()：将 Canvas 转换成 Base64 图片格式。

---

📌 2. 在图片中央添加半透明水印

function addCenteredWatermark(imageSrc, watermarkText) {
  const img = new Image();
  img.crossOrigin = "anonymous"; // 处理跨域问题
  img.src = imageSrc;

  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;

    // 绘制原图
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // 设置水印样式
    ctx.font = "48px Arial";
    ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // 计算水印位置（居中）
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // 绘制水印
    ctx.fillText(watermarkText, x, y);

    // 显示最终图片
    document.body.appendChild(canvas);
  };
}

// 使用示例
addCenteredWatermark("https://picsum.photos/600/400", "SAMPLE");

📌 水印位置在图片中央，适合防止裁剪去除。

---

📌 3. 生成斜角重复水印（防止裁剪去除）

function addRepeatingWatermark(imageSrc, watermarkText) {
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.src = imageSrc;

  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;

    // 绘制原始图片
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // 设置水印样式
    ctx.font = "24px Arial";
    ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // 计算水印间距
    const stepX = 200; // 水印横向间距
    const stepY = 100; // 水印纵向间距

    // 斜角循环绘制水印
    for (let x = -canvas.width / 2; x < canvas.width * 1.5; x += stepX) {
      for (let y = -canvas.height / 2; y < canvas.height * 1.5; y += stepY) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(-Math.PI / 6); // 旋转水印
        ctx.fillText(watermarkText, 0, 0);
        ctx.restore();
      }
    }

    // 显示水印图片
    document.body.appendChild(canvas);
  };
}

// 使用示例
addRepeatingWatermark("https://picsum.photos/600/400", "CONFIDENTIAL");

📌 特点：

• 水印重复铺满整个图片，防止裁剪去除。
• 倾斜角度（rotate(-Math.PI / 6)），提高安全性。

---

📌 4. 下载带水印的图片

如果需要 下载水印图片，可以使用 canvas.toBlob()：

function downloadWatermarkedImage(canvas, filename = "watermarked.png") {
  canvas.toBlob((blob) => {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  });
}

// 示例：点击按钮下载
document.getElementById("downloadBtn").addEventListener("click", () => {
  const canvas = document.getElementById("watermarkCanvas");
  downloadWatermarkedImage(canvas);
});

---

🚀 结论

✅ 右下角水印：适合 简单水印（但容易裁剪去除）。
✅ 居中水印：适合 版权保护，能防止简单裁剪。
✅ 重复水印：适合 高级防盗版（大部分图片素材网站使用）。
✅ 可下载水印图片，防止原始图片被二次使用。

🎯 如果你的图片需要防止盗用，建议使用 斜角重复水印方案！🚀