掌握React水印技术的实战指南：轻松实现图片、视频水印添加

引言

图片水印添加

1. 准备工作

首先，您需要一个React项目。如果还没有，可以使用create-react-app来快速搭建。

npx create-react-app watermark-react-app
cd watermark-react-app

2. 安装依赖

npm install react-to-print

3. 创建水印组件

import React from 'react';
import ReactToPrint from 'react-to-print';

const Watermark = ({ content, fontSize = 24, color = 'rgba(0, 0, 0, 0.2)' }) => {
  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'transparent',
        pointerEvents: 'none',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        color,
        fontSize,
        fontWeight: 'bold',
      }}
    >
      {content}
    </div>
  );
};

export default Watermark;

4. 使用水印组件

import React, { useRef } from 'react';
import Watermark from './Watermark';
import Image from './image.jpg'; // 假设图片路径为image.jpg

const App = () => {
  const componentRef = useRef(null);

  const handlePrint = () => {
    window.print();
  };

  return (
    <div>
      <Watermark content="Copyright © 2023" />
      <img src={Image} alt="Image with watermark" ref={componentRef} />
      <button onClick={handlePrint}>Print Image</button>
    </div>
  );
};

export default App;

视频水印添加

1. 使用视频编辑工具

对于视频水印，通常需要使用视频编辑软件，如Adobe Premiere Pro、Final Cut Pro或使用在线工具。

2. 创建水印

在视频编辑软件中，创建一个透明或半透明的文本或图像层作为水印。

3. 添加到视频

将水印层放置在视频上，并调整其位置和透明度。

4. 导出视频

完成编辑后，导出带有水印的视频。

总结