17370845950

使用Canvas绘制文字水印，通过Image加载图片并用fillText添加透明、旋转的文字水印，输出为base64或Blob；2. 可叠加图片Logo水印，需预加载并设置crossOrigin避免污染；3. 批量处理时用Promise.all并行、压缩尺寸与质量优化性能，可结合Web Worker防阻塞；4. 前端水印仅为可见提示，无法完全防截图，需配合服务端校验，水印应覆盖关键区域、采用半透明平铺布局以提升防护效果。

在前端实现水印添加功能时，JavaScript 提供了多种方式对图片进行处理，既能满足用户体验需求，又能有效防止内容盗用。核心思路是利用 Canvas 对原始图像绘制后叠加文字或图片水印，再输出为新的图片格式（如 base64 或 Blob）。以下是几种常见且实用的水印添加方案。

1. 使用 Canvas 绘制文字水印

通过 CanvasRenderingContext2D 可以将图片绘制到 canvas 上，并在其上添加透明文字水印。这种方式兼容性好，适用于大多数现代浏览器。

基本流程如下：

• 创建一个临时 canvas 元素
• 使用 Image 对象加载原始图片
• 图片加载完成后绘制到 canvas 上
• 调用 fillText 方法添加水印文字（可设置字体、颜色、透明度、旋转角度）
• 导出为 base64 图片数据或 Blob 用于显示或上传

function addTextWatermark(imageUrl, text, callback) {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // 避免跨域污染 canvas
  img.onload = function () {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;

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

    // 设置水印样式
    ctx.font = '20px Microsoft YaHei';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.textAlign = 'center';
    ctx.globalAlpha = 0.3;

    // 多位置添加水印（例如网格状）
    const step = 100;
    for (let x = 0; x < canvas.width; x += step) {
      for (let y = 0; y < canvas.height; y += step) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(-Math.PI / 6);
        ctx.fillText(text, 0, 0);
        ctx.restore();
      }
    }

    // 输出结果
    canvas.toBlob((blob) => {
      callback(URL.createObjectURL(blob));
    }, 'image/jpeg', 0.9);
  };
  img.src = imageUrl;
}

2. 添加图片水印（Logo 叠加）

除了文字水印，也可以叠加一个小的 logo 图标作为水印，增强品牌识别度。

• 同样使用 canvas 绘图上下文
• 先绘制主图，再绘制 logo 图片（建议预加载）
• 控制 logo 的位置、大小和透明度
• 适合用于电商、摄影类网站的图片保护

确保 logo 图片也设置了 crossOrigin 属性，避免 canvas 被标记为“污染”而无法导出数据。

3. 批量处理与性能优化

如果需要对多张图片批量加水印，建议采用以下策略提升性能：

• 使用 Promise.all 并行处理多个图片加载任务
• 限制 canvas 尺寸，避免处理超大图造成内存压力
• 对于移动端，可压缩输出质量以减少体积
• 考虑 Web Worker 异步处理复杂逻辑，避免阻塞 UI

4. 安全性与防绕过说明

前端加水印本质是“可见提示”，不能完全防止截图或另存为操作。但可以提高盗用成本。

• 水印应覆盖关键区域，避免集中在角落
• 推荐半透明、重复平铺式布局，干扰截图使用
• 服务端仍需校验来源并保留原始无水印版本
• 敏感内容不应仅依赖前端防护

基本上就这些。JavaScript 实现图片加水印灵活高效，结合 canvas 能力可满足大部分业务场景需求，不复杂但容易忽略跨域和性能问题。合理设计即可平衡体验与版权保护目标。