text-watermask
A watermask plugin for staic text or dynamic text!
Example
Mode: image
Mode: html
Install
import Watermask from '@shaodong/text-watermask';
Usage
const watermask = new Watermask({
text: '张三 6688', // 必填
mode: 'image', // 非必填，支持模式：['image', 'html']，默认为`image`，`image`模式使用canvas绘制，相比于`html`模式，清晰度稍微较差，高清模式请传入`html`
});
console.log(watermask); // 实例属性请参考：Attributes
Options
| Key | Type | Default | Description |
|---|---|---|---|
| text | string | 'watermask' | 传入的水印文字 |
| mode | string | 'image' | 水印的模式: image 及 html，建议使用 html 模式 |
| wrapper | HTMLElement | document.body | 自动渲染时 DOM 元素，默认使用 document.body，如传入null，则不会自动挂载，可在 onSucess 回调中拿到最终的结果，即实例属性 data |
| space | number | 5 | 水印文字间隔，会当做 padding 使用，如果想水印不太密集，可增加 space 值 |
| horizontalSpace | number | - | 水印文字水平方向间隔，会当做 paddingLeft 和 paddingRight 使用，若不传，则使用 space 值 |
| verticalSpace | number | - | 水印文字垂直方向间隔，会当做 paddingTop 和 paddingBottom 使用，若不传，则使用 space 值 |
| rotate | number | -45 | 水印文字旋转角度 |
| opacity | number | 1 | 水印文字透明度 |
| fontSize | string | '16px' | 水印文字大小 |
| fontFamily | string | 'Microsoft YaHei' | 水印文字字体 |
| color | string | '#DDDDDD' | 水印文字颜色 |
| textAlign | string | 'center' | 水印文字水平对齐类型 |
| verticalAlign | string | 'center' | 水印文字垂直对齐类型 |
| onSuccess | function | - | 成功回调，可拿到最终的结果，即实例属性 data |
| onError | function | - | - |
Attributes
| Key | Type | Description |
|---|---|---|
| data | string/HTMLElement | 最终渲染的结果，html 模式返回当前的 DOM 元素，image 模式则返回生产的 base64 URL，均会在options onSuccess 回调中返回 |
| el | HTMLElement | 当前水印文字的 DOM 元素，用于获取相关信息，如宽度、高度等，等同于 textWidth 和 textHeight |
| textWidth | number | 当前水印文字的真实宽度，包括传入的 space 计算在内 |
| textHeight | number | 当前水印文字的真实高度，包括传入的 space 计算在内 |
| renderWidth | number | 当前水印文字的最终渲染宽度，即在页面中占据的宽度，旋转后，渲染宽度会比真实宽度大 |
| renderHeight | number | 前水印文字的最终渲染高度，即在页面中占据的高度，旋转后，渲染高度会比真实高度大 |
| canvasWidth | number | canvas 画布的宽度，会根据设备像素比 devicePixelRatio 自动适配，仅image 模式返回 |
| canvasHeight | number | canvas 画布的高度，会根据设备像素比 devicePixelRatio 自动适配，仅image 模式返回 |
| cols | number | 渲染的列数，根据屏幕宽度及 el 宽度自动计算，通过 el 来渲染，仅html 模式返回值，image 模式返回0 |
| rows | number | 渲染的行数，根据屏幕高度及 el 高度自动计算，通过 el 来渲染，仅html 模式返回值，image 模式返回0 |
| settings | Object | 传入的options值 |