Thinking--在应用中添加动态水印，且不可删除

奋飛

发布于 2025-05-31 16:06:58

24500

代码可运行

文章被收录于专栏：Super 前端Super 前端

运行总次数：0

代码可运行

Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。

水印是一种用于保护版权和识别内容的技术，通常用于图像、视频或文档中。它可以是文本、图像或两者的组合，通常半透明或以某种方式嵌入到内容中，使其不易被移除或篡改。

今天主要阐述，如何在应用中添加动态水印「如下图」。

静态水印

① 将水印作为背景图片嵌入到页面或特定元素中。

.watermark-background {
  background-image: url('watermark.png');
  background-repeat: repeat;
  opacity: 0.5;
}

② 使用SVG（可缩放矢量图形）可以创建高质量的图像水印。SVG可以被嵌入到HTML中，并且可以很容易地通过CSS进行样式化。

<svg width="100%" height="100%" style="position: fixed; top: 0; left: 0; z-index: -1;">
  <text x="50%" y="50%" fill="black" font-size="50" text-anchor="middle" opacity="0.05">版权所有</text>
</svg>

✅ 易于实现，且不会影响页面的加载和渲染性能； ✅ 不存在层级（zIndex）问题，不会导致交互等问题； ❎ 容易被移除，且不能动态调整文案（在应用系统中，水印往往是登录者信息）

动态水印

简易 Demo

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.setAttribute('width', '200px')
canvas.setAttribute('height', '200px')

ctx.translate(20, 20); // x、y移动20px
ctx.rotate((Math.PI / 180) * 45);	// 旋转45度

ctx.font = 'normal 20px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillText('李刚', 60, 0);
ctx.font = 'normal 14px Arial';
ctx.fillText('https://ligang.blog.csdn.net/', 0, 20);

document.querySelector('body').style.backgroundImage = `url('${canvas.toDataURL()}')` // 以背景图片形式追加

✅ 高度定制化：可以根据用户行为或特定条件动态显示或隐藏水印。 ❎ 实现较复杂，对页面性能可能有一定的影响（JavaScript实现）

如何防止被删除

const observer = new MutationObserver((mutationList, observer) => {
  mutationList.forEach((mutation) => {
    // style 属性被修改，重新追加
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      document.querySelector('body').style.backgroundImage = `url('${canvas.toDataURL()}')`
    }
  })
})

// 接收body变化的通知
observer.observe(document.body, {
  childList: false, // 监听 target 节点中发生的节点的新增与删除（
  attributes: true, // 听的 target 节点属性值的变化
  subtree: false 	  // 监听以 target 为根节点的整个子树（包括子树中所有节点的属性）
})