H5响应式图片加水印需Canvas宽高严格匹配图片显示尺寸，监听resize等事件动态重绘；字号用img.width*0.03动态计算，右下角锚定并设textBaseline='bottom'，globalAlpha控制透明度；跨域需设置crossOrigin和服务端CORS头，用requestAnimationFrame优化性能，封装支持多输入类型及定位模式的Promise函数。

在 H5 中实现响应式图片加水印，核心是让水印随图片尺寸、设备屏幕、横竖屏切换实时适配，并在 Canvas 中完成动态合成。这不是简单叠一层 CSS，而是要确保水印文字/图标始终清晰、位置合理、不拉伸不变形，且在不同手机上表现一致。

水印与图片同步缩放的关键逻辑

Canvas 画布宽高必须严格匹配目标图片的当前显示尺寸（不是原始分辨率），否则水印会错位或被裁切。例如：
— 图片在 iPhone 上因 viewport 缩放显示为 320×480，Canvas 就设为 320×480；
— 同一张图在 iPad 横屏下显示为 1024×680，Canvas 就要重设为该尺寸。
需监听 window.resize、img.onload 和 video.resize（如用相机插件）事件，每次触发后重新计算并重绘。

移动端适配水印字体与位置

纯 px 字号在小屏上会过小，在大屏上又显粗，应改用相对单位并做设备分级处理：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用 ctx.font = `${fontSize}px sans-serif` 动态计算字号：取 Math.max(12, Math.min(20, img.width * 0.03)) 作为基础值
• 右下角锚定最稳妥：坐标设为 canvas.width - 20 和 canvas.height - 20，配合 textAlign = 'right' + textBaseline = 'bottom'
• 避免使用 textBaseline = 'alphabetic'（iOS Safari 渲染偏高），统一用 'bottom' 或 'middle'
• 透明度用 ctx.globalAlpha = 0.25 控制，比 CSS opacity 更精准，不影响 canvas 其他绘制内容

跨域图片与性能优化要点

从相册选图或 URL 加载的图片若跨域，Canvas 会被污染，无法导出。解决方法：

• 服务端返回图片时添加 Access-Control-Allow-Origin: * 响应头
• 前端加载时设置 img.crossOrigin = 'anonymous'
• 使用 requestAnimationFrame 驱动绘制循环，比 setInterval 更省资源、更准
• 水印文本、字体、颜色等静态配置提前缓存，避免每帧重复拼接字符串
• 如需斜向平铺水印，务必用 ctx.save() → rotate() → draw → ctx.restore()，防止坐标系污染后续绘制

封装建议：一个可复用的合成函数

可封装成接受图片对象、水印文本、定位参数的函数，返回带水印的 Blob 或 Base64：

• 输入支持 File、Blob、URL、HTMLImageElement 四种类型
• 自动识别是否需要压缩（如 > 2MB 则先用 canvas.toBlob 压缩）
• 定位支持 top-left / center / bottom-right / tile 四种模式
• 返回 Promise，便于链式调用到上传流程（如 uView2 的 u-upload）