Canvas绘制水印图片是最可行方案：先drawImage绘制原图，再用fillText叠加半透明旋转文字，通过globalAlpha、字体、坐标和循环密度控制实现全覆盖水印。
Canvas 绘制水印图片是最可行的方案
HTML5 本身没有“嵌入水印图片”的原生属性或标签，<img alt="html5怎么嵌入水印图片_html5嵌入水印防盗法【步骤】" > 或 <picture></picture> 都无法直接叠加不可复制的视觉水印。真正能落地的方式是用 canvas 在图像上动态绘制文字或透明 logo，并导出为带水印的图像——这不是“嵌入”，而是“合成”。浏览器不支持在渲染层自动加水印，所有前端水印本质都是绘制行为。
用 drawImage + fillText 实现半透明文字水印
核心逻辑：先用 drawImage 绘制原图，再用 fillText 叠加旋转文字。关键在透明度、字体、坐标和重复密度控制：
-
ctx.globalAlpha = 0.12控制水印透明度（太低看不见，太高干扰阅读） - 使用无衬线字体如
'sans-serif'，避免系统缺失字体导致渲染异常 - 用
ctx.translate()和ctx.rotate()实现倾斜排布，避免水印被轻易裁剪 - 循环绘制多个水印点，覆盖整个画布区域，例如每 120px × 120px 放一个
const canvas = document.getElementById('watermarkCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.12;
ctx.font = '16px sans-serif';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (let x = 40; x < canvas.width; x += 120) {
for (let y = 40; y < canvas.height; y += 120) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(-Math.PI / 6);
ctx.fillText('CONFIDENTIAL', 0, 0);
ctx.restore();
}
}
};
img.src = '/original.jpg';
水印图片（logo）叠加比文字更难防截图
如果要用小 logo 图片做水印，必须注意：drawImage 加载 logo 时存在跨域限制；且 PNG 透明通道在 canvas 中可能被意外丢弃。常见问题包括：
- logo 图片未设置
crossOrigin="anonymous"，导致toDataURL()报错SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' - logo 尺寸过小（如 24×24），在高 DPI 屏幕上模糊或像素化
- 只在固定位置绘制一个 logo，用户截图时可轻松避开
- 未对 logo 做灰度/亮度调整，导致深色背景上完全不可见
建议用 SVG 转成 Image 对象加载，或预渲染为 base64 字符串避免跨域问题。
立即学习“前端免费学习笔记（深入）”；
别指望前端水印真正防盗
所有 canvas 水印都可被禁用 JavaScript、截取渲染前 DOM、或用开发者工具直接读取原始 img.src 绕过。真正的防护必须依赖服务端生成带水印的图片（如用 Node.js 的 sharp 或 Python 的 PIL），或结合 DRM、Token 鉴权限制图片 URL 有效期。前端水印唯一作用是增加普通用户盗用成本，不是技术防线。
