【亲测免费】 watermark-js-plus 使用教程

1. 项目介绍

watermark-js-plus 是一个基于 canvas 的浏览器水印库，支持文本、多行文本、图像和富文本水印。该项目具有以下特点：

• 🛠️ 丰富的功能：支持多种类型的水印，包括文本、图像等。
• 🔑 完全类型化的API：提供灵活的编程接口，并支持 TypeScript 类型定义。
• 📦️ 极轻量：库的体积非常小，几乎不会对应用性能产生影响。

该项目适用于需要在浏览器中添加水印的场景，支持 Vue 2、Vue 3 和 React 框架。

2. 项目快速启动

安装

首先，使用 npm 安装 watermark-js-plus：

npm install watermark-js-plus

使用示例

添加普通水印

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

const watermark = new Watermark({
  content: 'hello my watermark',
  width: 200,
  height: 200,
  onSuccess: () => {
    // 成功回调
  }
});

watermark.create();

添加盲水印

import { BlindWatermark } from 'watermark-js-plus';

const watermark = new BlindWatermark({
  content: 'hello my watermark',
  width: 200,
  height: 200,
  onSuccess: () => {
    // 成功回调
  }
});

watermark.create();

解码盲水印

import { BlindWatermark } from 'watermark-js-plus';

BlindWatermark.decode({
  url: 'uploadFile', // 图像URL
  onSuccess: (imageBase64) => {
    // 成功回调
  }
});

3. 应用案例和最佳实践

应用案例

1. 文档管理系统：在文档管理系统中，可以使用 watermark-js-plus 为上传的文档添加水印，防止文档被非法复制和传播。
2. 图片分享平台：在图片分享平台中，可以为上传的图片添加水印，标识图片来源，保护版权。

最佳实践

• 自定义水印样式：通过调整 width、height、font 等参数，自定义水印的样式，使其更符合业务需求。
• 多行文本水印：通过设置 content 为多行文本，可以在水印中添加更多信息，如时间、用户名等。

4. 典型生态项目

• Vue.js：watermark-js-plus 支持 Vue 2 和 Vue 3，可以与 Vue 生态系统无缝集成。
• React：watermark-js-plus 也支持 React，可以方便地在 React 项目中使用。
• TypeScript：项目提供了完整的 TypeScript 类型定义，方便 TypeScript 用户使用。

通过以上步骤，您可以快速上手并使用 watermark-js-plus 为您的项目添加水印功能。