HTML5需用canvas手动加水印：先drawImage绘制原图，再fillText叠加文字或createPattern贴图；注意图片加载、跨域、dpr适配及toDataURL导出细节。
Canvas drawImage 后用 fillText 叠加文字水印
HTML5 本身不提供“给图片加水印”的原生 API，必须借助 canvas 手动绘制。核心思路是：先把原图画到 canvas 上，再用 fillText 或 drawImage（贴小图）叠加水印内容。
常见错误是直接在 img 元素上操作——Image 对象，再绘入 canvas。
- 确保图片已加载完成（监听
img.onload），否则drawImage会静默失败 - 水印文字建议用半透明色，例如
ctx.fillStyle = "rgba(255, 255, 255, 0.3)"，避免遮挡主体 - 字体设置必须显式指定大小和字体族，如
ctx.font = "16px sans-serif"，否则可能回退到极小默认值 - 文字位置用
ctx.fillText(text, x, y)，注意y是基线位置，不是文字顶部，可加ctx.textBaseline = "middle"更易控制
用 createPattern 贴图水印（倾斜重复效果）
纯文字水印容易被裁剪或覆盖，更鲁棒的方式是把水印做成小 PNG 图片，用 createPattern 创建平铺画刷，再用 fillRect 覆盖全画布。
这种方案适合版权类水印，比如“CONFIDENTIAL”斜向重复，视觉干扰强且难以去除。
立即学习“前端免费学习笔记（深入）”；
- 水印图需提前加载为
Image对象，不能直接传路径字符串给createPattern - 调用
ctx.fillStyle = ctx.createPattern(img, "repeat")后，再ctx.fillRect(0, 0, canvas.width, canvas.height) - 记得在绘制水印前
ctx.globalAlpha = 0.15控制透明度，否则太刺眼 - 倾斜效果要靠
ctx.rotate()配合ctx.translate()实现，注意坐标系变换后需ctx.setTransform(1,0,0,1,0,0)重置，否则后续绘制错位
toDataURL 导出带水印的图片
绘制完成后，用 canvas.toDataURL("image/png") 或 canvas.toDataURL("image/jpeg", 0.9) 获取 base64 字符串，就能用于下载、上传或替换原图。
这里最容易忽略的是跨域问题：如果图片来自其他域名（如 CDN），浏览器会因安全策略拒绝读取 canvas 像素，导致 toDataURL 抛出 SecurityError。
- 服务端需对水印图资源返回
Access-Control-Allow-Origin: *头 -
前端
img加载时设crossOrigin = "anonymous"，否则即使服务端支持也无效 - 导出 JPEG 时第二个参数是质量（0–1），设太低会导致水印边缘锯齿明显
- 大图导出可能卡顿，可考虑用
canvas.toBlob(callback, type, quality)避免阻塞主线程
移动端适配与性能注意点
在 iOS Safari 或安卓 WebView 中，高分辨率屏（dpr > 1）下 canvas 渲染会模糊，因为 canvas 的 width/height 属性是逻辑像素，但显示用的是物理像素。
不处理的话，水印文字发虚、线条变粗，看起来像没加一样。
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas 实际宽高：
canvas.width = width * dpr，canvas.height = height * dpr - 再用 CSS 缩放回逻辑尺寸：
canvas.style.width = width + "px"，canvas.style.height = height + "px" - 所有绘图坐标和字号都要乘以
dpr，包括fillText的x/y和font大小 - 频繁加水印建议复用 canvas 和上下文，避免反复创建对象造成内存压力
水印逻辑看似简单，但跨域、dpr、字体渲染、导出格式这些点任何一个漏掉，都会让效果打折扣。尤其服务端没配 CORS 或忘了 crossOrigin，整个流程会在静默中失败。
