@haoyunkai/watermark NPM

waterMark

纯 js 水印生成兼容 vue react

#依赖
yarn add @haoyunkai/watermark
npm install @haoyunkai/watermark
#div必须position:relative ;
<template>
    <div id="id" style="height: 200px;position:relative;">
    </div>
</template>
<script>
# 引入
    import Watermark from "@haoyunkai/watermark";
    #在元素生成完成生命周期 运行
    Watermark.set(document.getElementById('id'),"options");
    #可配置参数
    options={
        text : "", 
        ...
    }
</script>

方法

方法名称	字段解释	传参方式
set	生成	set（获取元素,options）
clear	删除单个水印	clear(name)
clearAll	删除全部水印当前页面销毁要清除水印	clearAll()

options

字段	字段解释	默认值
text	水印文案	默认空
name	删除单个清除时传参	默认不填
width	宽度	默认 120
height	高度	默认 120
fontSize	文字大小	默认 120
rotate	旋转文字角度	默认 -10
top	上边距	默认 0
left	左边距	默认 0
right	右边距	默认 0
bottom	下边距	默认 -10
adaptive	开启自适应宽度	默认 false
adaptiveWidth	自适应宽度计算方式文字大小+自适应数加字数	默认 10
rotateDivAdaptive	旋转自适应宽高	默认 false
rotateDivWidth	默认旋转div宽	默认 10000
rotateDivHeight	默认旋转div高	默认 10000
rotateDivDeg	旋转角度	默认 40