在 Canvas 中添加水印的优雅方式

2023-11-01 16:28:49

图像水印：利用 Canvas 保护和提升视觉吸引力

在互联网汪洋中，图像成为不可或缺的信息载体，其完整性和所有权尤为重要。水印，一种巧妙叠加元素，提供了一种在不影响图像美感的前提下维护图像归属的解决方案。本文将深入探讨利用 Canvas 元素在图像上添加水印的优雅技术，助您轻松提升图像的品牌知名度和保护其知识产权。

Canvas 水印：解锁无限可能性

Canvas 是一种强大的 HTML5 元素，允许在网页中直接创建和操作位图。其灵活性为添加水印等图形处理任务提供了无限可能性。水印原理简单，就是在原始图像上叠加一层半透明的自定义标识。这层标识可以包含文本、图像或其他元素，既彰显图像所有权，又不遮挡重要内容。

JavaScript Canvas 实现：简洁高效

借助 JavaScript Canvas，我们只需不到 50 行代码即可实现水印添加。核心逻辑如下：

加载图像： 使用 drawImage() 方法将原始图像绘制到 Canvas 上。
创建水印： 定义水印文本或图像，并将其绘制到 Canvas 上。
调整水印位置和透明度： 根据需要微调水印的位置和透明度，确保其既醒目又不破坏图像美感。
导出水印图像： 使用 toDataURL() 方法将 Canvas 转换为 DataURL，从而创建水印图像。

代码示例：

function addWatermark(image, watermarkText) {
  // 创建一个新的 Canvas，大小与原始图像相同
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;

  // 将原始图像绘制到新的 Canvas 上
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);

  // 创建水印文本
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // 设置水印文本颜色和透明度
  ctx.font = 'bold 30px Arial'; // 设置水印文本字体和大小
  ctx.fillText(watermarkText, 10, 30); // 绘制水印文本

  // 导出水印图像
  return canvas.toDataURL('image/jpeg');
}