HTML5图片加水印技巧分享

HTML5本身不支持直接为图片添加水印，必须借助Canvas手动实现：先将原图加载至Image对象并绘制到canvas上，再通过fillText叠加半透明文字水印，或用createPattern平铺自定义水印图片（如斜向重复的“CONFIDENTIAL”），同时需严格处理图片加载时机、跨域安全策略（服务端CORS配置 + 前端crossOrigin="anonymous"）、高分辨率屏适配（按devicePixelRatio缩放canvas及绘图参数）、导出格式与质量控制（toDataURL/toBlob）等关键细节——任何一个环节疏忽都可能导致水印失效、模糊、无法导出甚至静默报错，真正落地远比想象中复杂。

Canvas drawImage 后用 fillText 叠加文字水印

HTML5 本身不提供“给图片加水印”的原生 API，必须借助 canvas 手动绘制。核心思路是：先把原图画到 canvas 上，再用 fillText 或 drawImage（贴小图）叠加水印内容。

常见错误是直接在 img 元素上操作—— 标签无法被 canvas API 修改，必须先加载进 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，整个流程会在静默中失败。

理论要掌握，实操不能落！以上关于《HTML5图片加水印技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！