在 web 前端开发中，为了保护网站的版权信息和公司商标，常常需要给图片和文本添加水印。今天介绍一款基于 React 封装的水印组件 npm 包——watermark-for-react。
1. 安装
在你的项目根目录下，使用以下命令安装 watermark-for-react：
npm install watermark-for-react --save
2. 使用示例
添加以下代码到你的项目中，你就可以使用水印功能了：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ ---- ---- ------------
-------- ----- -
------ -
---- ----------------
---------- ------------ ---------- --------- ------ ------------- --
---- ---------- ---------- --
------
--
-
------ ------- ----3. API
watermark-for-react 的主要 API 包括：
<Watermark>
watermark-for-react 的主要组件，用于添加水印。
属性
text: string
水印显示的文本。
font: string
水印文字的字体属性。示例：'30px Microsoft YaHei'。
opacity: number
水印文字的透明度。示例：0.2。
angle: number
水印文字的旋转角度。示例：15。
width: number
水印文字区域的宽度。示例：400。
height: number
水印文字区域的高度。示例：200。
createMark()
一个工具方法，用于生成水印图片。可以设置文字、字体、透明度和角度。
属性
text: string
水印显示的文本。
font: string
水印文字的字体属性。示例：'30px Microsoft YaHei'。
opacity: number
水印文字的透明度。示例：0.2。
angle: number
水印文字的旋转角度。示例：15。
4. 实战示例
在实际开发中，我们可能需要根据多种情况来动态生成水印图片。这里介绍一个例子，在 React 中根据路由参数设置不同的水印。
首先，安装 react-router-dom：
npm install react-router-dom --save
在 App.js 中引入 react-router-dom，并按照路由参数设置 Watermark 组件的 text 属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ ------------
-------- ----- -
------ -
--------
-----
----
----
----- ------------------
-----
----
----- ---------------------------
-----
----
----- -----------------------
-----
-----
------
------ -------- ----- ------------- -- ----- --- --
------ ---------------- ------------- -- --------- --- --
------ ------------- ------------- -- ------ --- --
---------
--
-
-------- ------ -
------ -
---- ----------------
---------- ----------- ---------- --------- ------ ------------- --
-------------------
------
-
-
-------- ---------- -
------ -
---- ----------------
---------- ------------ ---------- --------- ------ ------------- --
---------------
------
--
-
-------- ------- -
------ -
---- ----------------
---------- ----------- ---------- --------- ------ ------------- --
---------------
------
--
-
------ ------- ----最后，加入一些 CSS 样式，使得水印能够居中对齐。
-- -------------------- ---- ------- ---- - ----------- ------- ------------ ----- - ---------- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
至此，你已经学会了如何在 React 中使用 watermark-for-react。希望本文对你的项目开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d74