如何在 ReactJS 中裁剪图像？

在 ReactJS 中裁剪图像是一项常见任务。可以使用许多库进行图像裁剪，但最广泛使用的是 react-avatar-editor。

安装

安装方法：

npm i react-avatar-editor

用例

以下是使用 react-avatar-editor 的示例。首先，导入 AvatarEditor 组件。

import AvatarEditor from 'react-avatar-editor';

然后，创建一个新的组件，我们将使用它来裁剪图片。

JSX

export default class ImageCropper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      image: "/path/to/image.png",
      position: { x: 0.5, y: 0.5 },
      scale: 1,
      rotate: 0,
      borderRadius: 0,
      preview: null
    };

    this.handleScale = this.handleScale.bind(this);
    this.handlePositionChange = this.handlePositionChange.bind(this);
    this.handleRotate = this.handleRotate.bind(this);
    this.handleBorderRadiusChange = this.handleBorderRadiusChange.bind(this);
    this.handleSave = this.handleSave.bind(this);
  }

  setEditorRef = (editor) => {
    if (editor) this.editor = editor;
  };

  handleScale(e) {
    const scale = parseFloat(e.target.value);
    this.setState({ scale });
  }

  handlePositionChange(position) {
    this.setState({ position });
  }

  handleRotate(e) {
    const rotate = parseFloat(e.target.value);
    this.setState({ rotate });
  }

  handleBorderRadiusChange(e) {
    const borderRadius = parseInt(e.target.value, 10);
    this.setState({ borderRadius });
  }

  handleSave() {
    if (this.editor) {
      const canvasScaled = this.editor.getImageScaledToCanvas().toDataURL();
      this.setState({
        preview: canvasScaled
      });
    }
  }

  render() {
    return (
      <div>
        <AvatarEditor
          ref={this.setEditorRef}
          image={this.state.image}
          width={250}
          height={250}
          scale={this.state.scale}
          position={this.state.position}
          onPositionChange={this.handlePositionChange}
          rotate={this.state.rotate}
          borderRadius={this.state.borderRadius}
          onSave={this.handleSave}
        />
        <div>
          <input
            name="scale"
            type="range"
            onChange={this.handleScale}
            min="1"
            max="5"
            step="0.1"
            value={this.state.scale}
          />
          <input
            name="rotate"
            type="range"
            onChange={this.handleRotate}
            min="-180"
            max="180"
            step="1"
            value={this.state.rotate}
          />
          <input
            name="borderRadius"
            type="range"
            onChange={this.handleBorderRadiusChange}
            min="0"
            max="100"
            step="1"
            value={this.state.borderRadius}
          />
          <button onClick={this.handleSave}>Save</button>
        </div>
        {this.state.preview && <img src={this.state.preview} />}
      </div>
    );
  }
}

步骤

1. 导入 AvatarEditor 组件。
2. 在组件的构造函数中，设置 state 对象，该对象包含 image、position、scale、rotate、borderRadius 和 preview 参数。
3. 绑定 handleScale、handlePositionChange、handleRotate、handleBorderRadiusChange 和 handleSave 函数。
4. 定义 setEditorRef 函数，该函数充当 AvatarEditor 组件的回调函数。
5. 实现 handleScale、handlePositionChange、handleRotate、handleBorderRadiusChange 和 handleSave 函数。
6. 在 render() 方法中，用 AvatarEditor 组件来渲染图像并允许用户裁剪。另外还包括实时预览和保存到本地相册等选项。

说明

1. 使用 image 参数设置要裁剪的图像。
2. 使用 width 和 height 参数设置组件的宽度和高度。
3. 使用 scale 参数设置图像的缩放比例。
4. 使用 position 参数设置图像在容器中的位置。
5. 使用 onPositionChange 参数监听图像在容器中的位置变动事件。
6. 使用 rotate 参数设置图像的旋转角度。
7. 使用 borderRadius 参数设置边框的圆角。
8. 使用 onSave 参数保存裁剪后的图像。
9. 使用一些输入控件来让用户调整参数。

总结

这些步骤演示了如何在 ReactJS 中裁剪图像。使用 react-avatar-editor 库，我们可以更轻松地实现图像裁剪，并提供一些额外的选项，如实时预览和保存到本地相册等。如果您需要裁剪图像，这些步骤将是很好的起点！