0.0.4 • Published 2 years ago

the-watermark v0.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

the-watermark

NPM

在网页中添加水印。

基本原理是通过 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',
});

配置

NameDescribeTypeDefault
container待挂载的容器,如果不指定,则默认为 bodyDOMbody
content水印需要显示的文本string"watermark"
width每个水印文本所占空间的宽度。可以理解为用于控制水印横向的密度number300
height每个水印文本所占空间的高度。可以理解为用于控制水印纵向的密度number200
zIndexCSS 的 zIndexnumber1000
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