HTML5图片加水印技巧分享

本文深入解析了HTML5中利用Canvas手动为图片添加水印的完整技术路径，涵盖文字与图案水印的实现细节：从正确加载图片、避免跨域限制、适配高分辨率屏幕（dpr），到精准控制字体渲染、透明度、倾斜重复贴图，再到安全导出base64或Blob格式图片——每一步都直击开发者在实际落地中极易踩坑的关键点，帮你避开静默失败、模糊失真、导出报错等常见陷阱，真正实现稳定、清晰、可部署的前端水印方案。

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学习网公众号！