watermark-js-plus高级的水印插件

项目地址：https://zhensherlock.github.io/watermark-js-plus/zh/

GitHub地址：https://github.com/zhensherlock/watermark-js-plus

这是什么?

这是一个基于 canvas 画布的水印库，作用于浏览器中。

功能

• 创建水印和暗水印
• 支持文本、多行文本、图片、富文本
• 支持监听DOM改动行为，可防止水印被手动删除
• 支持TS
• 丰富的配置项

浏览器兼容性

开始安装

使用 npm：

npm install watermark-js-plus

使用 yarn：

yarn add watermark-js-plus

用法

引入水印插件

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

实例化

const watermark = new Watermark({
 content: 'hello my watermark',
 width: 200,
 height: 200,
 onSuccess: () => {
   // success callback
 }
})

添加水印

watermark.create()

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
})
watermark.create();

示例

文本水印

import { Watermark } from 'watermark-js-plus' // 引入水印插件

const watermark = new Watermark({
 content: 'hello my watermark',
 width: 200,
 height: 200,
 rotate: 22,
 layout: 'grid',
 gridLayoutOptions: {
   rows: 2,
   cols: 2,
   gap: [20, 20],
   matrix: [[1, 0], [0, 1]]
 },
 advancedStyle: {
   type: 'linear',
   colorStops: [
     {
       offset: 0,
       color: 'red'
     },
     {
       offset: 1,
       color: 'blue'
     }
   ]
 },
 onSuccess: () => {
   // success callback
 }
})

watermark.create() // 添加水印

watermark.destroy() // 删除水印

效果图

图片水印

<img class="text-watermark-image">
 
import { ImageWatermark } from 'watermark-js-plus' // import watermark plugin

const imgDom = document.querySelector('.text-watermark-image');

const watermark = new ImageWatermark({
 content: 'my text watermark',
 width: imgDom.width,
 height: imgDom.height,
 dom: imgDom,
 rotate: 0,
 translatePlacement: 'bottom-end',
 fontColor: '#fff',
 globalAlpha: 0.5,
 fontSize: '30px'
})

watermark.create() // add watermark

watermark.destroy() // remove watermark

效果图