HTML无法直接通过data属性给图片加水印，必须依赖JavaScript读取data-watermark值后，用Canvas绘制或CSS伪元素叠加实现；Canvas方案可控性强、支持旋转透明度，但需处理跨域和onload时机；CSS方案简单轻量，但不支持像素级控制且易被禁用。
data属性本身不能直接给图片加水印
HTML 的 data- 属性只是存储数据的容器，它不会触发任何渲染行为。你想用 data-watermark="CONFIDENTIAL" 这种写法让图片自动显示水印，浏览器根本不会理——它只认 src、alt 这类原生属性。
真正起作用的是 JavaScript 读取这些 data- 值，再动态创建覆盖层（比如 canvas 或绝对定位的 <div>），最后叠在 <img> 上面。
- 常见错误现象：
<img data-watermark="DRAFT" src="a.jpg">页面里啥也没变，水印没出现 - 必须配合 JS 才能生效；纯 HTML + CSS 无法实现“自动水印”
- 推荐把水印逻辑封装成函数，避免每个图片都手写一遍 DOM 操作
用 canvas 在图片上绘制文字水印（推荐）
canvas 方式最可控：支持旋转、透明度、字体大小、位置偏移，且不破坏原始图片结构。关键点是先加载图片，再画到 canvas 上，最后替换或覆盖原图。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const img = document.querySelector('img[data-watermark]');
const watermarkText = img.dataset.watermark;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
ctx.font = 'bold 24px sans-serif';
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate(-Math.PI / 6); // 倾斜
ctx.fillText(watermarkText, canvas.width / 2, canvas.height / 2);
img.src = canvas.toDataURL(); // 替换原图
};
- 必须等
img.onload触发后才能读取naturalWidth/Height，否则尺寸为 0 -
toDataURL()生成 base64 图片，适合小图；大图会卡顿，考虑用<canvas>叠在原图上方（CSS 定位）而非替换 - 注意跨域：如果图片来自其他域名，
img.crossOrigin = 'anonymous'必须提前设置，否则 canvas 会污染，toDataURL()报错
用 CSS + 伪元素叠加水印（简单场景可用）
如果只要求文字水印居中、半透明、固定样式，且图片是块级显示（比如设置了 display: block），可以用父容器 + ::after 实现，省去 canvas 开销。
HTML 结构需调整：
<div class="watermarked-img" data-watermark="INTERNAL"> <img src="a.jpg" alt=""> </div>
CSS：
.watermarked-img {
position: relative;
display: inline-block;
}
.watermarked-img::after {
content: attr(data-watermark);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: rgba(255, 255, 255, 0.2);
font-size: 24px;
font-weight: bold;
pointer-events: none;
}
- 必须用包裹容器，
<img>自身不支持::before/::after -
pointer-events: none是关键，否则水印会挡住图片点击事件 - 不支持对图片像素级控制（比如文字随缩放自适应），缩放图片时水印可能错位
data属性命名和兼容性注意事项
data- 属性名要符合规范：只能含字母、数字、连字符（-），不能有下划线或大写字母。浏览器会自动转为小写，且驼峰式写法（如 data-waterMark）在 JS 中要用 dataset.watermark 访问（连字符转驼峰）。
- 错误写法：
data-WaterMark="OK"→ JS 里dataset.WaterMark读不到，得写dataset.watermark - 别用
data-src这类易混淆名，避免和懒加载库冲突 - IE11 支持
dataset，但老版本 iOS Safari 对canvas.toDataURL('image/webp')不支持，优先用image/png
水印不是加了 data- 就完事，它本质是数据搬运工；真正干活的是后续的 JS 渲染逻辑，而 canvas 和 CSS 方案选哪个，取决于你是否需要精确控制文字在像素层面的位置与样式。
