bian-watermark

v1.0.5

Published

2 months ago

watermark：一个支持TS的前端水印SDK，可以自由的在图片或前端页面中添加各种形式和内容的水印（或暗水印）！

Downloads

0High
0Medium
0Low

handsomebian

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

一、✨什么是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/[email protected]/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|

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme