一个基于 canvas 实现的简单文本水印工具
import waterPrinte from 'water-printe'
const clearWaterPrinte = waterPrinte('哀木涕 Y009527');
setTimeout(() => {
clearWaterPrinte();
}, 10000)
<!-- 记得修改最新的版本号 -->
<script src="https://unpkg.com/[email protected]/lib/water-printe.min.js"></script>
<script>
window.WaterPrinte('哀木涕 Y009527')
</script>
下图是工具效果
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
text |
显示在水印中的文本 | string | - | 药研社 |
el |
水印需要插入的位置,可以传入 DOM 或者 CSS 选择器 | string/HTMLDOM | - | body |
options |
水印工具的一些设置项,用于修改样式文字大小密度等 | Object | - | - |
clear |
水印返回的清理函数,用于清除水印 | Function | - | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
zIndex |
水印的层级 | number | - | 999999 |
rotate |
水印文字旋转角度 | number | - | -20 |
width |
每个文字的区块的宽度,(注意文字是居中的) | number | - | 200 |
height |
每个文字的区块的高度,(注意文字是居中的) | number | - | 200 |
font |
水印文字的字体样式 | string | - | 14px Microsoft JhengHei |
color |
水印文字的颜色 | string | - | rgba(0 , 0, 0, 0.15) |