Bian-watermark NPM

一、✨什么是bian-watermark？

bian-watermark 是一个基于TS的WEB前端水印SDK，它包含：

🌴 支持一个页面添加多处不同水印
🌵 支持使用图片、单行文本、多行文本作为水印
🐠 支持自定义水印样式，开箱即用
🌈 安全防御 - 防止他人删除水印dom或修改样式属性
💻 使用 TypeScript 编写，提供完善的类型定义

二、 🏗 安装

NPM

推荐使用 npm 方式安装最新版

// npm
npm install @deepen/watermark --save

// yarn
yarn add @deepen/watermark

// pnpm
pnpm install --dev @deepen/watermark

CDN

你可以通过 unpkg.com/bian-watermark 来获取最新的 SDK，当然你也可以指定 @x.x.x 来获取特定版本的 SDK，然后在合适的位置引入即可

<script src="https://unpkg.com/bian-watermark@2.1.1/dist/bian-watermark.umd.js"></script>

<body>
    <div id="box">
        君不见，黄河之水天上来，奔流到海不复回。
        君不见，高堂明镜悲白发，朝如青丝暮成雪。
    </div>
    <script>
        const mark=Watermark.Watermark
        new mark({
                text:'工号-姓名',
                container:'box',
            })
    </script>
    
</body>

三、🔨使用示例

import { Watermark } from '@bian/watermark';

const watermark = new Watermark({ ... });

// 如果需要修改水印参数，请调用
watermark.update({ ... });

// 隐藏水印
watermark.hide();

// 显示水印
watermark.show();

// 销毁水印
watermark.destroy();

四、⚙️选项

基本参数

参数	说明	类型	默认值
container	水印挂载节点	HTMLElement 或 string	-
image	图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印	string	-
text	水印文本, 为数组时表示多行水印	string 或 string[]	-
zIndex	水印层级	number	9999
width	单个水印宽度	number	120
height	单个水印高度	number	64
opacity	水印透明度	number	0.15
rotate	旋转的角度	number	-22
fontSize	设置字体大小	number	16
fontWeight	设置字体粗细	number 或 string	normal
fontStyle	规定字体样式	string	normal
fontVariant	规定字体变体	string	normal
fontColor	设置字体颜色	string	#000
fontFamily	设置水印文字的字体	string	sans-serif
blindText	盲水印文本	string	-
blindOpacity	盲水印透明度	number	0.005

高级参数

参数	说明	类型	默认值
monitor	是否开启保护模式	boolean	true
mode	展示模式，interval 表示错行展示	string	interval
gapX	水印之间的水平间距	number	100
gapY	水印之间的垂直间距	number	100
offsetLeft	水印在 canvas 画布上绘制的水平偏移量	number	0
offsetTop	水印在 canvas 画布上绘制的垂直偏移量	number	0
pack	是否使用水印组件包裹内容	boolean	true

方法

参数	说明	类型
update	更新水印配置，并重新渲染	(opts: Options) => void
show	显示水印	() => void
hide	隐藏水印	() => void
destroy	销毁水印	() => void

watermark 水印 vue水印 react水印 ts水印前端水印

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago