纯html无法生成可导出水印，必须依赖canvas或后端；css叠加仅限浏览器渲染层，导出时丢失；canvas通过加载源图、构造旋转透明水印纹理、逐像素绘制实现可靠水印。
纯 HTML 无法生成水印——它没有绘图能力、不支持图像合成，所谓“HTML 水印生成器”实际必须依赖 canvas 或后端服务。直接用 <div> 叠加文字只是视觉模拟，导出为图片时水印会丢失。
<h3>为什么不能只用 HTML + CSS 做可导出的水印</h3>
<p>CSS 的 <code>background-image 或伪元素 ::before 添加的文字/图案，仅在浏览器渲染层可见；一旦调用 html2canvas 或截图，若未显式绘制到 canvas 上，水印大概率不出现或错位。常见错误现象包括：导出 PNG 没水印、水印位置偏移、透明度失效、中文乱码。
-
canvas是唯一能在前端可靠合成水印并导出图像的原生方案 - CSS 水印无法控制渲染顺序与像素级叠加，
z-index在跨 canvas 场景下无效 - 浏览器对
canvas.toDataURL()的跨域限制，会导致加载远程图片时抛出SecurityError
用 canvas 实现可导出水印的核心步骤
关键不是“加文字”，而是“在目标图像像素上逐帧绘制水印纹理”。需分三步：加载源图 → 创建水印图案（含旋转、透明、重复）→ 绘制到 canvas 并导出。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 使用
drawImage()先将原图完整绘制到 canvas 上 - 用
createPattern()构造带旋转的水印canvas作为纹理，避免逐次fillText()导致性能下降 - 设置
globalAlpha = 0.15控制水印透明度，save()/restore()保证状态隔离 - 导出前务必检查
canvas.width/height是否匹配原图尺寸，否则拉伸失真
const watermarkCanvas = document.createElement('canvas');
const ctx = watermarkCanvas.getContext('2d');
watermarkCanvas.width = 200; watermarkCanvas.height = 200;
ctx.rotate(-Math.PI / 6);
ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = 'rgba(0,0,0,0.15)';
ctx.textAlign = 'center';
ctx.fillText('CONFIDENTIAL', 100, 100);
处理跨域图片与中文兼容性问题
用户上传本地文件无跨域问题，但若允许粘贴 URL 或从图床加载图片，crossOrigin = "anonymous" 必须显式设置，否则 toDataURL() 报错；中文水印则需确保字体已加载或回退到系统默认字体。
- 给
<img>设置crossOrigin="anonymous"，且服务端需返回Access-Control-Allow-Origin: * - 避免使用未声明的 web font，
ctx.font中写死"14px 'Microsoft YaHei', sans-serif"更稳妥 - 用
img.decode()确保图片解码完成再绘制，防止 canvas 出现空白 - 水印文本过长时，用
ctx.measureText().width动态缩放字号，避免溢出
真正可用的水印生成器，核心不在界面交互，而在 canvas 绘制逻辑是否绕过了跨域陷阱、是否把水印真正“烧录”进像素数据——这些细节漏掉一个，用户点下载就得到一张干净图。
