@tinyfe/watermark

水印 APIs， 支持自动生成。外部传入水印，并实时监听补全被删除的水印。

Usage

基础用法(so easy)

import WaterMark from '@tinyfe/watermark';

new WaterMark({
  container: document.querySelector('.watermark'),
  text: '法网恢恢疏而不漏，POI',
});

进阶用法

new WaterMark({
  container: document.querySelector('.watermark'),
  text: '法网恢恢疏而不漏，POI',
  fontType: 'Microsoft YaHei',
  color: 'red',
  fontSize: 24,
  alpha: 0.2,
  image: '',
  repeat: true,
  style: {
    width: 1000,
    height: 800,
    top: '30px',
  },
});

new WaterMark({
  monitor: false,
  container: document.querySelector('.watermark1'),
  text: '还在想抄袭，搞屁哦',
  fontSize: 24,
  color: 'red',
  alpha: 0.5,
  image: '',
  repeat: true,
  style: {
    width: 1000,
    height: 800,
    top: '30px',
  },
});

new WaterMark({
  monitor: false,
  image: 'https://avatars.githubusercontent.com/u/20939839?v=4',
  container: document.querySelector('.watermark2'),
  fontSize: 24,
  color: 'red',
  alpha: 0.5,
  style: {
    width: 1000,
    height: 800,
    top: '30px',
  },
});

参数

Options

| Key | 类型 | 默认值 | 描述 | | ------------------------- | ------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | container(必选参数) | string | HTMLElement | null | 挂载节点。 注意, 传入值为 string 时, 为了保证唯一性, 默认是以 id 的方式传入 | | monitor | boolean | true | monitor 是否监控, true: 不可删除水印; false: 可删水印 | | observer | MutationCallback | | MutationObserver Callback | | observerOptions | object | ObserverOptions | MutationObserver Options | | encoderOptions | number | 0.92 | 在指定图片格式为 image/jpeg 或 image/webp的情况下可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围, 将会使用默认值 0.92。其他参数会被忽略。 | | style | object | {} | 初始化 canvas 样式 |

水印配置

| Key | 类型 | 默认值 | 描述 | | -------------------- | --------- | ----------------- | ---------------------------------- | | prefix | string | '' | 水印前缀，只在 text 模式下使用 | | text(必选参数) | string | '' | 当 image为空值时使用 text 模式 | | font | string | Microsoft YaHei | 字体相关样式 | | fontSize | number | 24 | | | image | string | '' | 水印图片 | | color | string | #848FA7 | 水印颜色 | | alpha | number | 0.2 | 水印透明度 | | rotate | number | 340 | deg，水印旋转角度， | | scale | number | 1 | 缩放 | | repeat | boolean | true | 水印是够在x轴 y 轴上重复 | | rows | number | 5 | 重复行数 | | cols | number | 5 | 重复列数 | | startX | number | 20 | px, 重复水印x轴起点 | | startY | number | 20 | px, 重复水印y轴起点 | | xGap | number | 200 | px, 重复水印x轴偏移 | | yGap | number | 100 | px, 重复水印y轴偏移 |

ObserverOptions

| Key | 类型 | 默认值 | 描述 | | ----------------------- | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- | | childList | boolean | true | 观察目标子节点的变化, 是否有添加或者删除 | | attributes | boolean | true | 观察属性变动 | | subtree | boolean | true | 观察后代节点 | | attributeFilter | string[], undefined | ['style'] | 特性名称数组, 只观察选定的特性 | | characterData | boolean | | 是否观察 node.data(文本内容) | | attributeOldValue | boolean | | 如果为 true, 则将特性的旧值和新值都传递给回调(参见下文), 否则只传新值(需要 attributes 选项) | | characterDataOldValue | boolean | | 如果为 true, 则将 node.data 的旧值和新值都传递给回调(参见下文), 否则只传新值(需要 characterData 选项) |

APIs 设计

自动水印实现

通过创建 canvas 绘制水印, 并转换成 base64, 然后添加到外部传入的 dom 上, 并通过 MutationObserver 提供监视用户对 DOM 树所做更改的能力来自动补全删除的水印。(Note: MutationObserver 兼容性)

外部水印

通过外部传入的 image 来实现自动补全删除的水印。