说明
这篇文章完全是搬运的，只是将英文翻译成中文。
react-watermark-component是一个可以生成水印背景图片的组件。- 这个react组件来自有赞公司的一个内部项目。
特点
- 布局是倾斜的
- 安全防御——防止有人删除水印dom，或者修改样式属性
- 支持securityAlarm回调——水印被攻击时撤销
- 支持配置水印文本的样式，如字体、旋转角度、水印宽度、水印高度。
- 支持在一个页面中使用该组件两次或多次
- 水印是用canvas绘制的
安装
yarn add react-watermark-component
//或者
npm i react-watermark-component --save
导入
这个包是使用es6开发，推荐使用以下方式加载
import ReactWaterMark from 'react-watermark-component';
// 或者
const ReactWaterMark = require('react-watermark-component')
组件的props
- waterMarkText:string，水印文本内容
- openSecurityDefense:bool，决定是否开启安全防御。默认情况下，安全防御未开启。
- securityAlarm：函数，当安全防御开启、水印受到攻击时，会调用securityAlarm回调。securityAlarm 属性是可选的，当有人删除水印 dom 或修改水印 dom 的样式属性时会触发它。
- options:object，options是可选的，options对象的字段默认值如下。
option配置
option | default value | 对应配置 |
|---|---|---|
| chunkWidth | 200 | 水印宽度 |
| chunkHeight | 60 | 水印高度 |
| textAlign | 'left' | 居左对齐 |
| textBaseline | 'bottom' | 水印文字对齐方式 |
| globalAlpha | 0.17 | 透明度 |
| font | '14px Microsoft Yahei' | 字体 |
| rotateAngle | -0.26 | 倾斜角度 |
| fillStyle | '#666' | 水印颜色 |
- chunkWidth：num，水印的宽度，建议该值大于真实宽度，如真实宽度为150，对应chunkWidth为200
- chunkHeight:num，水印的高度，建议该值至少是真实水印文字font-size的四倍
Demo
render() {
const text = `${'这是亲测的水印'}, ${15061956272}`
const beginAlarm = function() { console.log('start alarm'); };
const options = {
chunkWidth: 300,
chunkHeight: 100,
textAlign: 'left',
textBaseline: 'bottom',
globalAlpha: 0.17,
font: '14px Microsoft Yahei',
rotateAngle: -0.26,
fillStyle: '#666'
}
return (
<ReactWaterMark
waterMarkText={text}
openSecurityDefense
securityAlarm={beginAlarm}
options={options}
>
<AppLayout>
...
</Applayout>
</ReactWaterMark>
)
}
