用canvas绘制文字水印最可靠，需图片onload后drawImage，设置textBaseline和textAlign居中对齐，globalAlpha控透明度，toDataURL导出时注意跨域、MIME类型及质量参数，斜向平铺需save/restore+translate+rotate，前端水印仅防误用，防窃取须服务端生成。
用 canvas 绘制文字水印是最可靠的方式
HTML5 本身没有“给图片加水印”的原生属性，<img> 标签不支持叠加渲染文字。必须借助 canvas：先加载图片，再在画布上用 fillText() 绘制文字。这种方式能精确控制位置、透明度、旋转角度，且水印真正“融合”进图像像素——导出后不可剥离。
常见错误是直接用 CSS 叠加 div 或伪元素，那只是视觉层遮罩，截图或另存图片时水印根本不会保存。
- 必须等图片
onload完成后再调用drawImage()，否则画布为空 - 文字坐标默认以左下角为基准（Canvas 的文本基线是
alphabetic），建议设ctx.textBaseline = 'middle'+ctx.textAlign = 'center'避免偏移 - 使用
ctx.globalAlpha = 0.3控制水印透明度，别用 CSS opacity，它会影响整块 canvas 渲染
toDataURL() 导出带水印的图片要留意 MIME 类型
调用 canvas.toDataURL('image/png') 或 canvas.toDataURL('image/jpeg', 0.9) 才能得到含水印的 Base64 图片数据。若省略参数，默认是 image/png，但某些场景（如微信分享）要求 JPEG；此时必须显式传入类型和质量值，否则导出可能失真或体积过大。
注意：toDataURL() 在跨域图片上会触发 SecurityError。如果图片来自其他域名，需确保服务端返回 Access-Control-Allow-Origin: *，并在 img 上加 crossOrigin="anonymous" 属性。
立即学习“前端免费学习笔记（深入）”；
对设计或页面进行 WCAG 2.1 AA 无障碍审计。触发关键词：“audit accessibility”、 “check a11y”、 “is this accessible?” 或在审查设计时使用。
- 导出 PNG 无损但体积大；JPEG 有损但适合网页展示
- 质量参数仅对 JPEG 生效，取值 0–1，推荐 0.8–0.9 平衡清晰度与大小
- 移动端 Safari 对大尺寸 canvas（如 > 4096px）可能截断，需提前缩放图片
文字水印倾斜防覆盖的关键参数
平铺式斜向水印（比如 20° 旋转、半透明、重复填充）最实用。核心是用 ctx.rotate() 配合循环绘制，而不是只画一次。旋转前必须用 ctx.save() / ctx.restore() 保护状态，否则后续绘图全歪。
示例关键片段：
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.PI / 9); // 20度
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.font = 'bold 18px sans-serif';
ctx.fillText('CONFIDENTIAL', 0, 0);
ctx.restore();
- 旋转中心点用
translate()移到目标位置，再旋转，避免绕左上角转导致错位 - 字体大小建议 ≥16px，太小在高分屏上模糊不可读
- 颜色推荐
rgba(0,0,0,0.1)（黑字浅灰）或rgba(255,255,255,0.15)（白字浅白），兼顾可读性与不干扰原图
服务端生成更稳妥，但前端方案要防绕过
纯前端水印本质是“障眼法”：用户禁用 JS、直接右键另存原始 <img src>、或抓包下载源图，水印就失效。真要防泄漏，必须由服务端动态加水印（如用 Node.js 的 sharp 或 Python 的 Pillow）。
前端方案只适合增强体验、提示版权归属。若业务强依赖水印防窃取，别把逻辑全放在客户端——哪怕加了 canvas 水印，原始 URL 还在 DOM 里明摆着。
容易被忽略的一点：水印文字内容若含变量（如用户 ID），务必在服务端注入并签名，否则前端拼接的文字可被随意篡改。
