react实现图片裁剪

React 实现图片裁剪功能通常需要结合前端库如react-image-crop或者其他第三方组件，例如`react-avatar-cropper`或`react-resize-observer`等。以下是使用`react-image-crop`的一个简单步骤：

1. 首先，安装所需的库：

npm install react-image-crop react-avatar-cropper

2. 导入并使用组件：

import React from 'react';
import ImageCropper from 'react-image-crop';

function ImageCropExample() {
  const [image, setImage] = useState(null); // 图片数据，可以是从API获取或本地文件
  const [croppedImage, setCroppedImage] = useState({ src: '', width: 0, height: 0 }); // 裁剪后的结果

  const onCrop = (crop) => {
    // 更新裁剪后的图像信息
    setCroppedImage(crop);
  };

  return (
    <div>
      {image && (
        <ImageCropper
          src={image}
          aspectRatio="4/3" // 可选比例，默认1
          cropWidth={croppedImage.width} // 用户裁剪区域宽度
          cropHeight={croppedImage.height} // 用户裁剪区域高度
          onChange={onCrop}
          // 其他可配置项，如 minSize, maxSize 等
        />
      )}
      {/* 显示裁剪后的预览图 */}
      {croppedImage.src && (
        <img src={croppedImage.src} alt="Cropped Image" style={{ maxWidth: '100%', maxHeight: '100%' }} />
      )}
    </div>
  );
}

export default ImageCropExample;