在 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">
<img src="your-image.jpg" alt="需要添加水印的图片">
</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;
}; 
