@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字符串，可用于自定义添加到任何父容器内 |