1.0.1 • Published 2 years ago
@wecity/watermark
前端水印方案
概述
- 1、使用canvas动态创建水印内容，输出base64
- 2、利用css:background属性，自动排列水印图片单元
- 3、使用MutationObserver进行dom移除以及样式修改监听
快速使用
yarn add @wecity/watermark
import WaterMark from 'watermark'
new WaterMark({
width: 500,
height: 300,
rotation: -30,
shadow: true,
fontSize: 24,
color: 'rgba(255, 255, 255, 0.1)',
text: [
'text word 1',
'text word 2'
]
})
配置参数
| 名称 | 必须 | 说明 | 类型 | 默认值 |
|---|
| text | 是 | 水印内容，换行请使用数组模式 | Array | -- |
| id | 否 | 水印外层容器id | String | watermark |
| width | 否 | 水印单元宽度 | Number | 200 |
| height | 否 | 水印单元高度 | Number | 100 |
| shadow | 否 | 水印字体阴影 | Boolean | false |
| color | 否 | 水印字体颜色 | String | rgba(255, 255, 255, 0.1) |
| font | 否 | 水印字体 | String | 微软雅黑 |
| rotation | 否 | 水印旋转角度，顺时针方向旋转，单位角度 | Number | -15 |
| onlyBase64 | 否 | 仅用于创建base64，不会添加水印容器到全局 | Boolean | false |
| onlyWaterDOM | 否 | 仅用于创建base64以及水印内层容器，不会添加水印容器到全局 | Boolean | false |
| forceVisible | 否 | 是否开启dom移除样式修改守护，若监听到非法操作，组件会重新渲染水印内容，禁止手动移除 | Boolean | false |
API
| 名称 | 说明 |
|---|
| toggle | 开关，切换水印可见与否，通过此api操作水印可见合法，不会触发守护功能 |
| getBase64 | 获取当前水印的base64字符串 |
| getWaterContent | 获取当前水印内层容器的outerHTML字符串，可用于自定义添加到任何父容器内 |