invisible-watermark
Version:
watermark auto injector
58 lines (44 loc) • 1.74 kB
Markdown
# invisible-watermark
水印插件，可自动往全局页面插入一层水印，也可自行调用watermark类，通过配置添加水印以及获取水印图片地址。
## api
```javascript
export interface IWaterMarkConfig {
text?: string; // 自定义文字，可使用<br/>换行
sso?: string; // sso地址
mode?: 'canvas' | 'svg'; // 水印生成模式
gap?: number; // 单个水印之间的宽度间隔
angle?: number; // 倾斜角度
fontSize?: number; // 字体大小
fontFamily?: string; // 字体
color?: string; // 颜色
el?: HTMLElement | null; // 添加水印的dom
}
// 实例方法
resolveBackgroundImageUrl();//获取背景图url
render();//渲染水印
```
## 安装
```javascript
yarn add invisible-watermark
```
## 使用
1.自动注入一层全局水印
```javascript
import { autoInject } from 'invisible-watermark';
autoInject();
```
2.主动为指定dom插入隐水印
```javascript
import waterMark from 'invisible-watermark';
new waterMark({ el: document.body }).render();
```
3.获取配置生成的水印地址
注⚠️：```resolveBackgroundImageUrl```方法返回的为一个对象含```width```和```url```。如果使用canvas生成blob，因处理高清屏模糊的问题，生成时对canvas画布放大了```${ratio}```倍，因此导出的blob图片也是放大了的。请对要设置水印的dom设置background-size: `${width}px`对图片进行等比例还原。svg则没有该问题，可忽略width字段。
```javascript
import waterMark from 'invisible-watermark';
const {width,url} = new waterMark({
angle: -15,
color:'rgba(27,28,51,.1)',
text: "测试文字第一行<br/>测试文字第二行"
}).resolveBackgroundImageUrl()
```