g-mask

使用canvas生成图片，给网页添加全局或者局部水印，效果如图所示。

可能是目前最好用最安全的网页添加水印的库了。

特性

1. 简单
   addMask('水印文案', options, container)
addMask(['水印文案第一行', '水印文案第二行', '水印文案第三行'], options, container)
2. 易用
   提供React组件，方便调用。
3. 安全防串改
   对dom修改、样式覆盖监控，发现更改行为，动态水印下自动覆盖，阻止浏览器端删除水印。静态水印自动跳转到空白页，保证数据安全。

用法

1. 安装

npm install g-mask

然后引入

var { addMask, removeMask, generateCanvas, Mask } = require('g-mask');
// or
import { addMask, removeMask, generateCanvas, Mask } from 'g-mask';

2. API

2.1 直接用

1. addMask(text, options, maskContainer)
   • text (String or Array of String): 水印中的文本，可传入数组，数组中的文本自动换行。
   • options (Object): 水印配置项，提供如下配置项：
     • width (Number): 水印的宽度，默认值300
     • Height (Number): 水印的高度，默认值150
     • color (String): 文本的颜色，默认#1E3375
     • alpha (Float): 文本的透明度，默认0.07
     • font (String): 文本的字体，默认'bold 12px "Microsoft YaHei"'
     • textRowSpacing (Number): 每一行的间隔，默认2px。
     • refresh (Boolean): 水印是否添加时间戳并每秒刷新，true刷新，反之不刷新。Default: true。
     • dateFormat (String): 指定时间的显示格式，默认'YYYY/MM/DD HH:mm:ss'。需要配合传入的文字中的{date}占位符使用，{date}会被替换为当前时间。举例：Global watermark {date}.。
   • maskContainer (dom or id of the dom): 添加水印的容器，如果未指定，则添加水印到body上。 当添加到body时，会创建一个div并将其appendChild上去，如果指定容器，则会设置指定容器的backgroundImage属性。建议添加水印到body，全局生效。
2. removeMask(maskContainer)
   • maskContainer (dom or id of the dom): 移除水印的容器。 移除水印，当maskContainer未指定，则移除body上水印。
3. generateCanvas(text, options) 暴露出来的生成水印图片的方法，返回生成水印图片的base64数据。
   • text (String or Array of String): 水印中的文本，可传入数组，数组中的文本自动换行。
   • options (Object): 水印配置项，提供如下配置项：
     • width (Number): 水印的宽度，默认值300
     • height (Number): 水印的高度，默认值150
     • color (String): 文本的颜色，默认#1E3375
     • alpha (Float): 文本的透明度，默认0.07
     • font (String): 文本的字体，默认'bold 12px "Microsoft YaHei"'
     • textRowSpacing (Number): 每一行的间隔，默认2px。

2.2 React

<Mask
  className="demo-container"
  text="Demo 1 watermark!!!"
  options={{
      width: 400,
      height: 100,
      color: '#000',
      alpha: 0.1,
      font: '10px Arial',
  }}
>
  Content or children put here!!!
</Mask>

React based component，props定义如下，含义参考2.1。

{
    className: PropTypes.string, // 自定义className，会被加在Mask组件最外层。
    text: PropTypes.string,
    options: PropTypes.shape({
      canvasConfig: PropTypes.shape({ // 参数可以放在`canvasConfig`属性下，也可以打平放在外部。
        width: PropTypes.number,
        height: PropTypes.number,
        color: PropTypes.string,
        alpha: PropTypes.number,
        font: PropTypes.string,
      }),
      width: PropTypes.number,
      height: PropTypes.number,
      color: PropTypes.string,
      alpha: PropTypes.number,
      font: PropTypes.string,
      refresh: PropTypes.bool,
    }),
    children: PropTypes.node,
  }

TODO

1. 局部添加的水印，在react或者其它环境中存在经常性的被修改的可能性，在静态水印的情况下，防串改功能暂未添加。