html中怎么添加图片水印效果 watermark制作-html教程-PHP中文网

html中怎么添加图片水印效果 watermark制作

裘德小鎮的故事

发布： 2025-06-28 13:47:02

原创

616人浏览过

在 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中怎么添加图片水印效果 watermark制作

在 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;
  };

登录后复制

以上就是html中怎么添加图片水印效果 watermark制作的详细内容，更多请关注php中文网其它相关文章！