react实现水印效果

React 页面水印的实现

前言

本文将介绍如何在 React 页面中添加水印效果，包括使用 SVG 和 Canvas 两种技术实现水印。

SVG 实现水印

SVG（可缩放矢量图形）是一种基于 XML 的矢量图形格式，具有可缩放性、清晰度高和可编辑性强等优点。SVG 实现水印的优势在于：

• 可缩放性：SVG 水印可以根据页面大小进行缩放，不会出现模糊的情况。
• 清晰度高：SVG 水印具有较高的清晰度，即使在高分辨率屏幕上也不会失真。
• 可编辑性强：SVG 水印可以轻松地进行编辑和修改，方便您根据需要调整水印的样式和内容。

实现步骤

1. 创建 SVG 水印文件

   <svg width="100%" height="100%">
     <text x="50%" y="50%" text-anchor="middle">水印</text>
   </svg>
   

2. 在 React 组件中引入 SVG 水印文件

   import waterMark from './waterMark.svg';
   
   const WaterMark = () => {
     return (
       <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: -1 }}>
         <img src={waterMark} alt="" />
       </div>
     );
   };
   

3. 将 WaterMark 组件添加到页面中

   ReactDOM.render(<WaterMark />, document.getElementById('root'));
   

Canvas 实现水印

Canvas 是一种基于 JavaScript 的绘图 API，可以创建动态的图形和动画。Canvas 实现水印的优势在于：

• 动态性：Canvas 水印可以根据需要进行动态更新，例如随着页面的滚动而移动或随着时间的推移而淡入淡出。
• 交互性：Canvas 水印可以与用户进行交互，例如用户可以拖动或旋转水印。
• 性能：Canvas 水印的性能通常比 SVG 水印更好，尤其是在处理复杂的水印时。

实现步骤

1. 在 React 组件中创建 Canvas 元素

   const CanvasWaterMark = () => {
     const canvasRef = useRef(null);
   
     useEffect(() => {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext('2d');
   
       ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
       ctx.font = '30px Arial';
       ctx.fillText('水印', canvas.width / 2, canvas.height / 2);
     }, []);
   
     return (
       <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: -1 }}>
         <canvas ref={canvasRef} width="100%" height="100%"></canvas>
       </div>
     );
   };
   

2. 将 CanvasWaterMark 组件添加到页面中

   ReactDOM.render(<CanvasWaterMark />, document.getElementById('root'));
   

SVG 与 Canvas 水印对比

特性	SVG 水印	Canvas 水印
可缩放性	优	良
清晰度	优	良
可编辑性	优	良
动态性	差	优
交互性	差	优
性能	良	优

总结

在 React 页面中添加水印效果可以有效地保护您的内容不被盗用。SVG 和 Canvas 都是实现水印的常用技术，各有优缺点。您可以根据自己的需求选择最适合您的方案。