在 html 中添加图片水印的核心方法包括使用 css 背景图片和 canvas 绘图。1. css 方案适合静态水印，通过 background-image、background-repeat、background-position 和 background-size 属性控制，适用于对样式要求不高的场景；2. canvas 方案更灵活，支持动态绘制图片或文字水印，并可通过 JavaScript 控制水印的位置、大小、透明度等；3. 适配不同屏幕时，css 可借助 background-size 和媒体查询，canvas 则通过动态计算尺寸实现响应式布局；4. 添加文字水印需设置字体、颜色并使用 filltext 或 stroketext 方法；5. 防止用户移除水印的方法包括多重水印、不规则位置、内容融合、服务器端生成及将 canvas 转换为 data url 等策略。
在 HTML 中添加图片水印效果，核心在于利用 CSS 的背景图片和定位属性，或者使用 Canvas 动态生成带有水印的图片。Canvas 方案更灵活，但稍微复杂一些。
解决方案
CSS 背景图片方案：
这种方案简单直接，适合对水印位置和样式要求不高的场景。
立即学习“前端免费学习笔记（深入）”；
- 准备水印图片： 创建一个透明背景的水印图片（PNG 格式最佳）。
- CSS 样式： 将水印图片设置为目标元素的背景图片，并调整 background-repeat、background-position 和 background-size 属性。
<div class="watermarked-image"> @@##@@ </div> <style> .watermarked-image { position: relative; /* 确保定位上下文 */ } .watermarked-image img { display: block; /* 移除图片下方的额外空间 */ } .watermarked-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('watermark.png'); /* 替换为你的水印图片 */ background-repeat: repeat; /* 或 no-repeat，根据需要调整 */ background-position: center; /* 调整水印位置 */ background-size: 100px; /* 调整水印大小 */ opacity: 0.5; /* 调整水印透明度 */ pointer-events: none; /* 防止水印遮挡下方元素 */ } </style>
Canvas 方案：
Canvas 方案更强大，可以动态生成水印，支持文字水印、图片水印，以及更复杂的水印布局。
- 创建 Canvas 元素： 在 HTML 中添加一个 Canvas 元素。
- JavaScript 代码： 使用 JavaScript 获取 Canvas 上下文，加载原始图片和水印图片，然后将它们绘制到 Canvas 上。
<canvas id="watermarkCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('watermarkCanvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = 'your-image.jpg'; // 替换为你的原始图片 const watermark = new Image(); watermark.src = 'watermark.png'; // 替换为你的水印图片 image.onload = () => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); watermark.onload = () => { // 绘制水印，可以多次绘制实现重复水印 for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { ctx.globalAlpha = 0.3; // 设置透明度 ctx.drawImage(watermark, i * 150, j * 100, 100, 50); // 调整水印位置和大小 ctx.globalAlpha = 1.0; // 恢复透明度 } } }; }; </script>
如何处理水印图片在不同屏幕尺寸下的适配问题？
CSS 背景图片方案可以通过 background-size 的 cover 或 contain 属性进行简单的适配。更复杂的适配，例如在不同断点下使用不同大小的水印图片，需要媒体查询。
Canvas 方案则可以通过 JavaScript 动态计算水印的位置和大小，根据屏幕尺寸进行调整。 例如，获取屏幕宽度，然后按比例缩放水印大小和间距。
const screenWidth = window.innerWidth; const watermarkSize = screenWidth * 0.1; // 水印大小为屏幕宽度的 10% const watermarkSpacingX = screenWidth * 0.2; // 水平间距 const watermarkSpacingY = screenWidth * 0.15; // 垂直间距 watermark.onload = () => { for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { ctx.globalAlpha = 0.3; ctx.drawImage(watermark, i * watermarkSpacingX, j * watermarkSpacingY, watermarkSize, watermarkSize * 0.5); ctx.globalAlpha = 1.0; } } };
如何添加文字水印，而不是图片水印？
Canvas 方案非常适合添加文字水印。
- 设置字体样式： 使用 ctx.font 设置字体、大小和样式。
- 设置文本颜色： 使用 ctx.fillStyle 设置文本颜色。
- 绘制文本： 使用 ctx.fillText() 或 ctx.strokeText() 绘制文本。
image.onload = () => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); ctx.font = '30px Arial'; // 设置字体 ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 设置颜色和透明度 ctx.textAlign = 'center'; // 设置文本对齐方式 ctx.fillText('Watermark Text', canvas.width / 2, canvas.height / 2); // 绘制文本 };
如何防止用户轻易移除水印？
完全防止移除水印几乎是不可能的，但可以增加移除难度。
- 多重水印： 在图片上添加多个水印，增加移除成本。
- 不规则水印位置： 避免将水印放在图片边缘，放置在内容区域。
- 水印与内容融合： 设计水印时，使其与图片内容有一定的融合，增加移除后的痕迹。
- 服务器端水印： 在服务器端生成水印图片，避免客户端操作。 这需要后端配合，前端只负责展示。
- 使用 Canvas 生成 Data URL： 将带有水印的 Canvas 内容转换为 Data URL，这样用户下载的图片就是带有水印的图片，无法直接获取原始图片。
image.onload = () => { // ... (绘制水印) const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 转换为 Data URL，可以设置图片质量 // 可以将 dataURL 赋值给 img 标签的 src 属性，或者下载 // 例如： document.getElementById('downloadLink').href = dataURL; };
