如何在ReactJs中上传图片前在图片拾取器中裁剪图片

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 1 / 1 });

  const onDrop = (acceptedFiles) => {
    const file = acceptedFiles[0];
    setSelectedImage(URL.createObjectURL(file));
  };

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  const onCropComplete = (crop) => {
    // 处理裁剪完成后的逻辑
    console.log(crop);
  };

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>拖放图片或点击选择图片</p>
      </div>
      {selectedImage && (
        <ReactCrop
          src={selectedImage}
          crop={crop}
          onChange={(newCrop) => setCrop(newCrop)}
          onComplete={onCropComplete}
        />
      )}
    </div>
  );
};

export default ImageUploader;