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 |