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

大前端 来源：ShareFlow 2024-12-04 14:13:21 阅读：983

这是一个基于 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

总结

• • 丰富的功能：支持文本、多行文本、图片、富文本和暗水印。
• • 完全类型化的API：灵活的 API 和完整的 TypeScript 类型。
• • 极致轻量化：大小只有 5kb 左右，你甚至可能忘记它的存在！