当前位置：首页 > React

react模态框如何加水印

2026-01-25 02:44:44React

添加水印的基本方法

在React模态框中添加水印可以通过CSS背景或Canvas绘制实现。CSS方法简单高效，适合静态水印；Canvas则支持动态内容和复杂效果。

// CSS背景水印示例
.modal-watermark {
  position: relative;
}
.modal-watermark::after {
  content: "CONFIDENTIAL";
  position: absolute;
  opacity: 0.2;
  font-size: 40px;
  transform: rotate(-30deg);
  pointer-events: none;
}

使用Canvas动态生成

通过React的useEffect钩子和Canvas API可以创建动态水印，支持自定义文本、角度和透明度：

import { useEffect, useRef } from 'react';

function WatermarkCanvas({ text }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.rotate(-0.3);
    ctx.fillText(text, 20, 70);
  }, [text]);

  return <canvas ref={canvasRef} className="watermark-canvas" />;
}

防止水印被移除

为确保水印难以被开发者工具删除，可采用DOM监控方案：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const watermark = document.querySelector('.watermark');
    if (!watermark) {
      document.body.appendChild(createWatermark());
    }
  });
});
observer.observe(document.body, { childList: true });

第三方库方案

使用现成库如react-watermark可快速实现：

npm install react-watermark

import Watermark from 'react-watermark';

<Modal>
  <Watermark text="SAMPLE" opacity={0.1}>
    <div>模态内容</div>
  </Watermark>
</Modal>

响应式水印布局

结合ResizeObserver确保水印适应不同屏幕尺寸：

react模态框如何加水印

const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width } = entry.contentRect;
    const fontSize = Math.max(16, width / 30);
    canvasRef.current.style.fontSize = `${fontSize}px`;
  });
});
resizeObserver.observe(containerRef.current);