在前端开发中，水印是一种很常见的需求。使用 npm 包 @rrc/watermark 可以轻松地实现图片和文本水印。本文将详细介绍如何使用该 npm 包，包括安装、使用和示例代码。
安装
使用 npm 安装 @rrc/watermark：
npm install @rrc/watermark --save
使用
使用方法非常简单，只需要引入该 npm 包，并调用相应的方法即可。
图片水印
使用图片水印的方式，只需要调用一个方法即可。该方法接受三个参数，分别是：
- 图片地址
- 水印文本
- 水印配置（可选）
示例代码：
-- -------------------- ---- -------
------ --------- ---- -----------------
-----------------
------- -------------
----- ------ ------- -------- ------
-------- -
----- ---
----- ---
-------- ----
----- ----- ------
-
---文本水印
使用文本水印的方式，同样只需要调用一个方法即可。该方法接受两个参数，分别是：
- 水印文本
- 水印配置（可选）
示例代码：
import watermark from '@rrc/watermark';
watermark.text('©2021 Example Company, Inc.', {
xPos: 20,
yPos: 20,
opacity: 0.5,
font: '20px serif'
});水印配置
水印配置是可选的，如果不传入，将使用默认配置。下面是可选的配置项：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| xPos | number | 0 | 水印位置 x 坐标 |
| yPos | number | 0 | 水印位置 y 坐标 |
| opacity | number | 1 | 水印透明度 |
| font | string | '16px sans-serif' | 水印字体 |
结语
@rrc/watermark 是一个非常实用的 npm 包，可以轻松实现图片和文本水印。希望本篇文章对于想要实现水印的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728181e8991b448e8b3c