Ant Design水印组件怎么做的？原理分析与代码实战

前言

今天来研究一下Antd 水印是如何实现的，顺便来实现一下。先来看看实现的成果。 还是不错的。

完整代码后面文章结尾有。

正文

实现原理

我们打开调试，很明显Antd是使用背景图片来实现水印的。

我们可以来分析一下它的原理

1. 绘制水印图案： 使用 <canvas> 绘制水印的文本或图片
2. 生成图案图片： 将 canvas 上绘制好的图案导出为一张图片数据 URL (Data URL)。
3. 应用为背景： 将生成的图案数据 URL 设置为某个容器元素的 background-image 属性。同时设置 background-repeat 为 repeat。这样，浏览器就会自动用这个图案重复铺满整个背景区域，形成水印效果。
4. 监听 DOM 变化 (MutationObserver)： 为了防止水印被意外删除、修改，使用 MutationObserver 来监听目标容器的 DOM 变化。一旦检测到变化，就会重新生成并应用水印，确保水印始终存。

代码实践

这里只挑关键点来说

1. 如何达到Antd那样的排布效果

这是第一版，是一排排的，整齐但是不好看

这是Antd，整齐也好看

因为每一块是这样，背景repeat一下，当然是整齐但是不好看的。

我们只需要将每一块变成这个样子，背景repeat一下，就是Antd那个样子。

这一段代码就是关键

2. 如何防止恶意删除

上面也说了使用MutationObserver来监听元素的 DOM 变化，一旦检查到元素的backgroundImage与上一次生成的backgroundImage不一致，就重新使用canvas生成backgroundImage

结语

有兴趣的可以试一试

源代码仓库地址：gitee.com/lin-zhiteng…