终极指南：如何用watermark-js-plus快速实现浏览器水印功能 🚀
项目地址: https://gitcode.com/gh_mirrors/wa/watermark-js-plus watermark-js-plus 是一款基于canvas的轻量级浏览器水印库，支持文本、图像和盲水印等多种类型，提供完全类型化API，可无缝集成Vue、React框架。本文将带你从安装到实战，轻松掌握这款水印神器！
📌 为什么选择watermark-js-plus？3大核心优势
✅ 功能全面，满足多样化需求
支持文本水印、多行文本、图像水印和隐私水印等多种类型，无论是简单的版权标识还是复杂的防篡改需求都能覆盖。核心实现位于 src/core/ 目录，其中隐私水印功能通过 src/core/blind.ts 实现，普通水印则由 src/core/watermark.ts 提供支持。
✅ 极致轻量化，性能无负担
库体积超小，几乎不影响页面加载速度。通过Rollup构建的打包配置确保代码精简，相关配置可查看 rollup.config.js。
✅ 框架友好，开箱即用
提供完整TypeScript类型定义（src/types/index.ts），完美支持Vue 2/3、React等主流框架，开发者无需额外适配。
🚀 5分钟快速上手：从安装到生成第一个水印
1️⃣ 一键安装（npm/yarn任选）
# 使用npm
npm install watermark-js-plus
# 使用yarn
yarn add watermark-js-plus
2️⃣ 基础文本水印：3行代码搞定
import { Watermark } from 'watermark-js-plus';
// 配置水印内容和样式
const watermark = new Watermark({
content: '内部文档 | 请勿外传', // 水印文本
width: 200, // 宽度
height: 150, // 高度
fontSize: 16, // 字体大小
color: 'rgba(128, 128, 128, 0.3)' // 半透明灰色
});
// 生成水印
watermark.create();
运行后效果类似下图（实际效果根据配置动态生成）： 
图：文本水印在页面中的展示效果（含透明度和旋转角度）
🔍 高级玩法：盲水印与图像水印实战
🔒 盲水印：隐藏信息的终极方案
盲水印可将信息嵌入图像中，肉眼不可见，适合版权追踪。通过 BlindWatermark 类实现：
import { BlindWatermark } from 'watermark-js-plus';
// 嵌入盲水印
const blindWatermark = new BlindWatermark({
content: 'user-id-12345', // 隐藏的用户ID
width: 500,
height: 300,
onSuccess: () => console.log('盲水印嵌入成功！')
});
blindWatermark.create();
// 提取盲水印（用于验证）
BlindWatermark.decode({
url: 'watermarked-image.png',
onSuccess: (result) => console.log('提取结果:', result)
});
🖼️ 图像水印：品牌标识更直观
支持将公司Logo等图像作为水印，增强品牌识别度：
new Watermark({
image: 'https://your-logo.png', // 图像URL
width: 120,
height: 60,
opacity: 0.2 // 透明度调整
}).create();
图：使用watermark-js-plus生成的图像水印效果（含透明度和重复布局）
💡 最佳实践：让水印更安全、更美观
🛡️ 防篡改保护：禁止删除和修改
通过监听DOM变化防止水印被篡改，相关逻辑在 src/utils/protection.ts 中实现。初始化时自动启用：
new Watermark({
content: '禁止复制',
protect: true // 开启防篡改保护
}).create();
🎨 自定义样式：打造专属水印
通过配置参数调整水印外观，支持字体、颜色、旋转角度等：
new Watermark({
content: '内部资料 | 请勿外泄', // 多行文本用\n分隔
width: 180,
height: 180,
fontSize: 14,
color: '#ff4400',
rotate: 30, // 旋转30度
gapX: 50, // 水平间距
gapY: 50 // 垂直间距
}).create();
📚 官方资源与生态支持
完整文档与示例
官方文档位于 docs/ 目录，包含详细配置说明和场景案例。推荐优先阅读：
框架集成示例
- Vue项目示例：可参考文档中的Vue集成章节
- React项目示例：通过 hooks 封装使用更便捷
📝 总结：选择watermark-js-plus的3个理由
- 简单高效：5分钟上手，API直观易懂
- 安全可靠：防篡改+盲水印双重保护
- 持续维护：活跃的开源项目，issues响应及时
立即安装watermark-js-plus，为你的Web应用添加专业级水印保护吧！ 🔒✨
npm install watermark-js-plus
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
