react水印组件
时间: 2023-07-01 20:16:38 浏览: 66
可以使用一个React组件来实现水印功能,具体实现如下:
```javascript
import React from 'react';
class Watermark extends React.Component {
componentDidMount() {
this.addWatermark();
}
addWatermark = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 150;
canvas.height = 100;
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(0,0,0,0.2)';
ctx.fillText('Watermark', 10, 50);
const watermarkUrl = canvas.toDataURL();
const watermarkStyle = `url(${watermarkUrl})`;
this.container.style.backgroundImage = watermarkStyle;
};
render() {
return (
<div
ref={(ref) => {
this.container = ref;
}}
style={{ width: '100%', height: '100%' }}
>
{this.props.children}
</div>
);
}
}
export default Watermark;
```
在 componentDidMount 中创建一个 canvas 元素,然后在 canvas 上绘制水印。再通过 toDataURL 方法将 canvas 转换成图片的 URL 地址,最后将这个 URL 地址设置为容器的背景图片即可。
使用时,只需要将需要添加水印的内容放在 Watermark 组件中即可:
```javascript
import React from 'react';
import Watermark from './Watermark';
class App extends React.Component {
render() {
return (
<Watermark>
<div style={{ width: '100%', height: '100%' }}>Hello World</div>
</Watermark>
);
}
}
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)