使用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 图标作为水印，增强品牌识别度。
立即学习“Java免费学习笔记（深入）”；
- 同样使用 canvas 绘图上下文
- 先绘制主图，再绘制 logo 图片（建议预加载）
- 控制 logo 的位置、大小和透明度
- 适合用于电商、摄影类网站的图片保护
确保 logo 图片也设置了 crossOrigin 属性，避免 canvas 被标记为“污染”而无法导出数据。
3. 批量处理与性能优化
如果需要对多张图片批量加水印，建议采用以下策略提升性能：
- 使用 Promise.all 并行处理多个图片加载任务
- 限制 canvas 尺寸，避免处理超大图造成内存压力
- 对于移动端，可压缩输出质量以减少体积
- 考虑 Web Worker 异步处理复杂逻辑，避免阻塞 UI
4. 安全性与防绕过说明
前端加水印本质是“可见提示”，不能完全防止截图或另存为操作。但可以提高盗用成本。
- 水印应覆盖关键区域，避免集中在角落
- 推荐半透明、重复平铺式布局，干扰截图使用
- 服务端仍需校验来源并保留原始无水印版本
- 敏感内容不应仅依赖前端防护
基本上就这些。JavaScript 实现图片加水印灵活高效，结合 canvas 能力可满足大部分业务场景需求，不复杂但容易忽略跨域和性能问题。合理设计即可平衡体验与版权保护目标。
