HTML无法直接给图片加水印，必须通过CSS伪元素、Canvas绘图或服务端预处理实现；其中服务端嵌入是唯一具备法律效力的方案，前端方案仅具提示作用且易被绕过。
HTML本身不支持给图片“直接加水印”，所有所谓“HTML加水印”都是靠外部手段叠加视觉层——CSS伪元素、Canvas绘图或服务端预处理。前端方案只能起提示作用，防不了截图、录屏、F12扒源地址，真要版权落地，必须服务端嵌入。
CSS ::after 伪元素是最常用但最易删的方案
核心是用 position: relative 包住 <img>，再用 ::after 绝对定位盖一层文字。它轻量、无JS依赖，适合内部系统或低敏感内容。
- 常见错误：父容器没设
position: relative，水印飞到页面顶部；overflow: hidden把水印裁掉 - 水印文字建议用
transform: rotate(-30deg)+font-size: 48px+opacity: 0.08，太淡看不见，太浓干扰阅读 - 务必加
pointer-events: none，否则会拦截图片上的点击、拖拽等交互 - 别把水印写死在
content: "© 2024"里——复制页面时一并带走，反而成了对方的版权声明
Canvas 绘图能生成带水印的图片 URL，但跨域会报 SecurityError
用 canvas.drawImage() 把原图和文字合成后调 toDataURL()，输出的就是一张“已带水印”的新图片。用户右键保存拿到的就是这个结果，但 F12 里仍能看到原始 src 地址。
-
img.crossOrigin = 'anonymous'必须在给img.src赋值前设置，顺序错了无效 - 目标图片服务器必须返回
Access-Control-Allow-Origin: *（或指定域名），否则 canvas 会被污染，toDataURL()直接抛SecurityError - 本地开发用
file://协议必报错，得跑http://localhost或类似服务 - 导出前确认
canvas.width和canvas.height已设为原图尺寸，否则水印拉伸变形
服务端预处理才是版权有效的唯一路径
前端所有方案都运行在用户浏览器里，审查元素删节点、禁用 JS、改 CSS —— 全都能绕过。只有服务端把水印像素级写进图片文件，才具备法律意义上的可追溯性。
立即学习“前端免费学习笔记（深入）”；
- 水印内容可嵌入用户 ID、时间戳、IP 摘要甚至数字签名，连 EXIF 都能带上元数据
- CDN 缓存的是带水印图，连中间链路都不可逆；而前端 Canvas 输出的 base64 图片，URL 本身无状态，无法绑定会话
- 如果图源来自不支持 CORS 的老图床，Canvas 方案直接失效，此时服务端是唯一出路
- 注意打印场景：
@media print默认照常渲染水印，用户 Ctrl+P 就能输出带水印的 PDF，而你可能完全不知情
真正难的不是“怎么加”，而是判断该在哪一层加：内部文档用 CSS 就够；客户预览页用 Canvas 做会话级水印；涉及商业授权或司法存证的图片，必须走服务端，且水印内容要动态绑定用户上下文，不能是静态字符串。
