前端水印、前端打印水印、打印文字水印图片水印、watermark-js-plus水印插件支持vue和react

安装

使用 npm:

npm install watermark-js-plus

使用 yarn:

yarn add watermark-js-plus

用法

1. 引入水印插件

   import { Watermark } from 'watermark-js-plus'

2. 实例化

   /*水印的容器:parant
     Type:`Element | string`
     Default:`'body'`
   */
   //parant配置指定父级盒子指定水印范围
   const watermark = new Watermark({
     content: 'hello my watermark',
     width: 200,
     height: 200,
     
     onSuccess: () => {
       // success callback
     }
   })
   // 添加水印
   watermark.create()
   // 删除水印
   watermark.destroy() 
   

CDN

使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/watermark-js-plus/dist/index.iife.min.js"></script>

使用 unpkg CDN:

<script src="https://unpkg.com/watermark-js-plus/dist/index.iife.min.js"></script>

用法

const watermark = new WatermarkPlus.Watermark({
  content: 'hello my watermark',
  width: 200,
  height: 200,
  parent:
})
watermark.create();

详细配置请看：官方文档