html canvas 给图片加水印并下载的核心三步是：先将原图绘制到 canvas 上，再叠加文字或 logo 水印（支持旋转、透明度与定位），最后用 toblob() 或 todataurl() 导出并触发下载；全过程在浏览器端完成，依赖图片 onload、crossorigin 配置、坐标变换及内存释放，适合轻量版权提示但无法替代服务端烧录式防护。
用 HTML Canvas 给图片加水印并下载，核心是三步：把原图画到画布上、叠加文字或 Logo 水印、导出为可下载的图片文件。整个过程在浏览器端完成，无需服务器参与，适合快速预览和轻量级版权提示。
准备画布与加载原图
先创建 canvas 元素，并确保图片加载完成后再绘制，避免空白或报错。跨域图片（如 CDN 上的图）需设置 crossOrigin="anonymous"，否则导出时会因“污染画布”失败。
- 动态创建 canvas 或复用已有 canvas 元素
- 用
Image对象加载图片，监听onload - 设置 canvas 宽高与图片原始尺寸一致（非显示尺寸），保证清晰度
- 调用
ctx.drawImage(img, 0, 0)把图完整绘制到画布左上角
添加文字或图像水印
水印分两类：文字水印更灵活，图像水印（如透明 PNG Logo）更专业。两者都支持旋转、透明度和位置控制。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 文字水印：用
ctx.font、ctx.fillStyle = 'rgba(r,g,b,a)'设置样式；ctx.translate()和ctx.rotate()实现倾斜铺满效果；ctx.fillText()绘制，推荐居中对齐+底部锚点便于定位 - 图像水印：另建一个
Image对象加载 Logo，等其加载完成再调用ctx.drawImage(logo, x, y, width, height)叠加；建议 logo 尺寸设为原图宽高的 1/5～1/8，透明度设为 0.2～0.4 - 批量水印（如斜向密排）：通过循环计算坐标，例如每间隔 120px、旋转 -25° 绘制一次文字
导出并触发下载
合成完成后，调用 canvas.toBlob() 或 canvas.toDataURL() 获取二进制或 Base64 数据，再用 <a></a> 标签模拟点击下载。
- 推荐用
toBlob()：内存更友好，尤其处理大图时；格式可选'image/jpeg'（带质量参数）或'image/png'（保留透明） - 生成下载链接：创建
a元素，设置href为 URL.createObjectURL(blob)，download属性指定文件名 - 自动触发下载后，及时调用
URL.revokeObjectURL()释放内存 - 移动端注意：部分 iOS 版本不支持直接触发下载，可引导用户长按保存
常见问题与注意事项
实际使用中容易忽略几个关键点，影响功能稳定性。
- 跨域限制：服务端必须返回
Access-Control-Allow-Origin: *（或指定域名），否则图片无法读取像素，水印也无法导出 - 性能优化：大图（如 >3000×3000）可能卡顿或内存溢出，建议加载前用
img.decode()预解码，或限制上传尺寸 - 字体兼容性：中文水印优先用
"Microsoft YaHei", "SimSun", sans-serif，避免用户系统无对应字体导致渲染异常 - 水印不可靠性：Canvas 方式生成的水印仅存在于前端展示层，原始图片仍可被直接右键另存，不能替代后端“烧录式”水印用于强版权保护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
