答案：通过HTML5 Canvas可在浏览器中实现图片水印。1. 创建canvas并获取上下文；2. 加载原图并绘制到canvas；3. 设置字体样式与透明度，用fillText添加文字水印；4. 可叠加半透明Logo图片作为图像水印；5. 使用toDataURL导出结果。注意跨域问题、CORS支持、移动端性能及大图内存消耗。
在HTML5网页中实现图片水印效果，可以通过Canvas绘图技术将文字或图像叠加到原图上，从而生成带水印的图片。这种方法无需依赖服务器端处理，用户可在浏览器中实时完成水印添加。
使用Canvas绘制文字水印
Canvas是HTML5提供的绘图API，适合用于图像处理。通过它可以在图片上绘制透明文字作为水印。
- 创建一个
元素，并获取其上下文 - 加载原始图片，使用
drawImage()将其绘制到Canvas上 - 设置字体、颜色和透明度，用
fillText()添加水印文字 - 导出合成后的图片（如base64格式）
示例代码：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'original.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillText('版权所有', 50, 50);
const watermarked = canvas.toDataURL('image/jpeg');
// 可将watermarked赋值给img标签显示
}
添加图像水印（Logo水印）
除了文字，也可以叠加一个小的Logo图片作为水印。
立即学习“前端免费学习笔记（深入）”；
- 准备一个半透明的Logo图片（如PNG格式）
- 在主图绘制完成后，再绘制Logo图层
- 调整Logo位置与大小，控制透明度
关键代码片段：
const logo = new Image();
logo.src = 'logo.png';
logo.onload = function() {
ctx.globalAlpha = 0.6; // 设置透明度
ctx.drawImage(logo, 10, 10, 80, 40); // 绘制小尺寸Logo
ctx.globalAlpha = 1.0; // 恢复默认
}
前端实现注意事项
虽然Canvas能实现水印功能，但需注意以下几点以确保兼容性和用户体验。
-
跨域图片可能触发Canvas污染，导致
toDataURL()报错。应确保图片同源或服务器开启CORS支持 - 移动端需考虑Canvas尺寸限制，过大图片可能导致内存问题
- 水印内容建议可配置，便于不同场景使用
- 若需保存图片，可结合
实现本地下载
基本上就这些。利用HTML5 Canvas，前端可以直接在浏览器中完成图片水印的合成，操作灵活且响应快速，适合轻量级水印需求场景。不复杂但容易忽略跨域和性能问题，开发时要特别留意。
