the-watermark

在网页中添加水印。

基本原理是通过 canvas 生成一张水印图片并转为 dataUrl ，通过 background-image 的方式挂到水印 dom 元素上。最后 append 到指定的容器中。

使用

<script src="./lib/the-watermark.js"></script>

<script>
  new Watermark();
</script>

import Watermark from "the-watermark";

new Watermark({
  container: document.querySelector('.section'),
  content: 'the-watermark',
});

配置

Name	Describe	Type	Default
container	待挂载的容器，如果不指定，则默认为 body	DOM	body
content	水印需要显示的文本	string	"watermark"
width	每个水印文本所占空间的宽度。可以理解为用于控制水印横向的密度	number	300
height	每个水印文本所占空间的高度。可以理解为用于控制水印纵向的密度	number	200
zIndex	CSS 的 zIndex	number	1000
font	同 canvas 用法的 font，控制水印文本的文字样式	string	"28px auto"
textAlign	同 canvas 用法的 textAlign，控制文本显示位置，	string	"center"
textBaseline	同 canvas 用法的 textBaseline，控制文本显示位置	string	"middle"
color	同 canvas 用法的 color，控制文本颜色和透明度	string	"rgba(200, 200, 200, 0.2)"
rotate	文本旋转角度	number	-34