图片加水印

图片水印是在照片或设计图上叠加文字、Logo 或另一张图片，用来标明版权、来源、品牌、使用状态或发布场景。它常用于商品图、作品集、活动照片、培训资料、社交媒体内容和交付前预览。水印的关键不是越大越好，而是在可识别和不破坏画面之间取得平衡：既要降低随手盗用的可能，又不能挡住主体、纹理、文字或重要细节。位置、透明度、尺寸、平铺方式和旋转角度都应根据图片类型调整。本工具在浏览器本地处理，适合快速标注和轻量保护。

水印处理完全在 2D Canvas 上完成。源图片通过 ctx.drawImage 以原始像素尺寸绘制到 HTMLCanvasElement 上，然后使用 ctx.fillText 叠加文字或使用第二次 drawImage 调用叠加图片 Logo。透明度由 ctx.globalAlpha 控制，它会乘以后续每个像素的 Alpha 通道；globalAlpha 设为 0.5 时叠加在 50% 透明的 PNG 上，最终像素只有 25%，这是「为什么水印看不见」最常见的原因。 定位使用标准 Canvas 变换：ctx.translate 将原点移动到放置锚点（左上、右上、居中、右下，或 3×3 网格的每个单元格），ctx.rotate(angle) 围绕该原点旋转对角印章，然后绘制调用在不添加额外偏移的情况下放置水印。平铺水印使用 createPattern 传入旋转后的源图，再通过 ctx.fillRect 在整个 Canvas 上绘制，这就是为什么全页 DRAFT 条纹无论源图尺寸如何都能保持均匀间距。字体度量来自 ctx.measureText，它返回 CSS 像素单位，因此一个在 2x 显示器上适配预览的 28px 标签在 1x 移动端导出时可能会被裁切。 导出步骤使用 canvas.toBlob 配合 'image/png'、'image/jpeg' 或 'image/webp' 格式，有损格式可选质量参数。Canvas 以源图分辨率运行，因此输出保留原始像素尺寸，但不携带源图 EXIF 方向信息、ICC 配置文件或其他元数据。超过 30 张大图的批量处理会阻塞 UI 线程，因为 toBlob 虽然是异步的，但绘制堆栈在主线程上同步运行，因此大批量任务适合将 Canvas 工作移入 Web Worker 配合 OffscreenCanvas 处理。

• 合成堆栈：ctx.drawImage 绘制底图，ctx.fillText（或第二次 drawImage）绘制水印，ctx.globalAlpha 控制透明度乘法。
• Alpha 计算：globalAlpha 与每个像素的现有 Alpha 值相乘，因此 0.5 的水印叠加在 0.5 Alpha 的 PNG 上渲染为 0.25，而非 0.5。
• 旋转：先用 ctx.translate 移动到锚点，再用 ctx.rotate(angle) 按弧度旋转，然后在原点 (0,0) 绘制，使变换保持以放置点为中心。
• 平铺：createPattern 返回 CanvasPattern，fillRect 可在整个 Canvas 上绘制，无论源图尺寸如何都能保持间距均匀。
• 文字度量：measureText 返回 CSS 像素单位，因此在 2x 预览上合适的标签在 1x 移动端导出时可能溢出图片边缘；不确定时按 canvas.width 等比缩放。
• 导出：toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) 保留源图分辨率但会去除 EXIF 和 ICC 信息；如果方向正确性很重要，需在绘制前根据 EXIF 方向旋转。