watermark-plus v1.6.1

js 水印插件

• 支持文本水印
• 支持双列文本水印
• 支持图片水印
• 可防止被删除
• 可防止重复渲染
• 可动态适应超长水印文本
• 高清晰度
• 支持浏览器端打印
• 可配置性强

效果图片

文本水印

双列水印文本

图片水印

通过图片水印方式可以实现私人订制，步骤：

①通过HTML + CSS 实现你想要的内容和样式； ②通过 html2canvas 类似操作将dom转canvas再转image； ③将image传入水印插件

可防止被手动删除

项目中效果

使用

import Watermark from 'watermark-plus';

const watermark = new Watermark({
  // 传参
  content: 'Hello World!',
});

// 创建水印
watermark.create();

或者

const { default: Watermark } = require('watermark-plus');

const watermark = new Watermark({
  // 传参
  image: 'https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg',
});

// 创建水印
watermark.create();

API

props

注意：

插件内部根据传入的参数动态计算水印文本显示完整时最小宽高，当超出设置的 width、height 时，会动态赋值width、height，但最大不超过maxWidth、maxHeight

方法

兼容性