全局水印

效果

ssa_watermark是一个基于canvas生成前端水印js库，同时加入前端水印攻防逻辑，例如当有人恶意篡改水印，可以捕获行为发出警告并记录，同时恢复被篡改的水印.

安装 & 使用

1. 安装

npm install ssa_watermark --save

2. 使用

import watermark from 'ssa_watermark'

watermark({
    text: CookieTool.getItem('_ssa_username'),
    // 水印字体
    fontSize: 16,
    // 水印透明度
    opacity: 0.6,
    // 水印颜色
    color: '#e1e1e1',
    // 水印图片大小控制
    width = 150,
    height = 150,
    // 修改水印回调
    onChange: () => {
        this.$Message.warning('请勿修改水印，你的操作已被记录');
    },
    ignoreAttr: [],
    // 图片生成方式 canvas/svg 建议svg
    generateMethod: 'canvas',
});

Options

1. text： 水印文案
2. fontSize：字体大小
3. opacity：水印透明度
4. color：水印颜色
5. width：生成水印图片宽
6. height： 生成水印图片高
7. onChange：水印节点被修改触发回调
8. ignoreAttr:  (非必填，默认无忽略，全部检测，v1.3.0新增) 节点的这些属性被修改时 忽略检测 
9. generateMethod: 默认canvas，可选canvas或者svg

FAQ

1、为什么水印有重影?

多半是因为多次调用了 Watermark()；想办法保证只调用一次。

跟新

Feature v1.1.0

1. 新增 containerDom 配置，用于配置水印DOM渲染父节点，注意：父节点非body，水印的position属性为absolute
2. 新增 rotateDegree 配置，用于调整水印旋转角度，默认值 -15

Feature v1.2.1

1. 新增zIndex配置，用于控制水印节点z-index属性, 默认值 9999
2. 新增水印销毁函数：在调用watermark之后返回一个对象，挂载destroy函数。 ​

Feature v1.3.0

1. 新增过滤属性的配置，用于忽略某些难以避免的属性修改

watermark({

    // ... 原有配置不变

    ignoreAttr: ['aria-hidden']

});

Feature v1.4.0

1. 新增​generateMethod配置，可选svg或者canvas生成水印背景图

​​