前端如何给图片加水印

方案一：

可以使用HTML5 Canvas和React的生命周期方法。下面是一个基本的实现步骤：

1.创建一个React组件来包含要添加水印的图片

import React, { Component } from 'react';

class WatermarkImage extends Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    this.addWatermark();
  }

  addWatermark() {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext('2d');

    const image = new Image();
    image.src = this.props.src;

    image.onload = () => {
      ctx.drawImage(image, 0, 0); // 绘制原始图片

      ctx.font = '20px Arial'; // 设置水印字体
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 设置水印颜色和透明度
      ctx.fillText('Watermark', 10, 30); // 绘制水印文字
    };
  }

  render() {
    return <canvas ref={this.canvasRef} />;
  }
}

export default WatermarkImage;

2.在父组件中使用 WatermarkImage 组件，并传递要添加水印的图片路径

import React from 'react';
import WatermarkImage from './WatermarkImage';

function App() {
  return (
    <div>
      <WatermarkImage src="/path/to/image.jpg" />
    </div>
  );
}

export default App;

在组件初始化时，componentDidMount 生命周期方法被调用，然后在画布上绘制了原始图片，并且加入了水印文字。你可以根据自己的需要来调整文字样式和位置。

需要注意的是，由于使用了 Canvas，可能会有一些跨域资源加载的问题。你需要确保你的图片可以被正确加载，并且符合跨域规则。

另外，这个示例只是一个简单的添加文字水印的实现，如果你需要添加自定义水印图片或者更复杂的水印效果，可能需要使用一些其他的库或者进行更多的自定义开发。

方案二：

可以考虑使用CSS来实现。下面是一个使用CSS来添加水印的简单实现步骤：

1.创建一个React组件来包含要添加水印的图片

import React, { Component } from 'react';

class WatermarkImage extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
  }

  componentDidMount() {
    this.addWatermark();
  }

  addWatermark() {
    const image = this.imageRef.current;
    const watermark = document.createElement('div');
    watermark.classList.add('watermark');
    watermark.innerText = 'Watermark';

    image.parentNode.insertBefore(watermark, image.nextSibling);
  }

  render() {
    return (
      <div>
        <img ref={this.imageRef} src={this.props.src} alt="Image" />
      </div>
    );
  }
}

export default WatermarkImage;

2.在CSS文件中定义水印样式

.watermark {
  position: relative;
}

.watermark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/path/to/watermark.png') center center repeat;
  opacity: 0.5;
}

3.在父组件中使用 WatermarkImage 组件，并传递要添加水印的图片路径

import React from 'react';
import WatermarkImage from './WatermarkImage';

function App() {
  return (
    <div>
      <WatermarkImage src="/path/to/image.jpg" />
    </div>
  );
}

export default App;

在组件初始化时，componentDidMount 生命周期方法被调用，然后在图片后面插入一个带有水印样式的div元素。你可以根据需要自定义水印样式，包括水印图片、透明度、重复方式等。

需要注意的是，这种方法只能添加简单的水印样式，无法实现复杂的水印效果。如果你需要更多的自定义功能，可能需要使用Canvas或其他库来实现