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