今天无意中看到 ant design pro 的后台中有一些水印，就看了下它的组件库：procomponents
get 到了这个方法，在此记录一下：
水印组件这样用
<watermark>
<div class="some-class">
...你的内容
</div>
</watermark>
内容区就会被加上一层水印。
原理
1、既然是用来包裹的组件，就要提供内容插槽对吧？整个结构大致如下：
<div class="watermark-wrapper" style="position: 'relative'; ...传入的 style">
{{子元素 插槽}}
<div
class="watermark"
style={{
// 设置水印蒙层的层级
zIndex: 9,
// 让水印蒙层充满整个内容区
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
// 这个有点不好算
backgroundSize: 设置水印图的尺寸大小，比如 300 px,
// 这个是最重要的，清除掉水印蒙层的鼠标事件，让蒙层不影响正常使用，水印的精髓所在
pointerEvents: 'none',
// 设置水印的背景图片重复
backgroundRepeat: 'repeat',
// 真正的水印图片，需要一个 base64 编码的图片
backgroundImage: url(base64Url),
...传入的水印样式,
}}
>
</div>
</div>
watermark-wrapper 和 watermark 可有可无，没样式。
2、现在要做的就是搞一个水印图片出来，动态创建一个 canvas，把各种配置加到它身上，可以加图片，加文字等，画出来的就是单个原始的水印了。
3、然后调用 canvas.toDataURL() 把图片转成 base64格式，大工告成。
里面最复杂的部分是画这个 canvas 了，具体的计算方法参考：链接
破解
都知道实现原理了，破解还不简单么，打开控制台，找到 class watermark，删掉 😉
