图片上传react-cropper在模态框裁剪 返回画布

在React中，`react-cropper`是一个用于图像裁剪的库，它可以帮助你在模态框中实现图片的预览、裁剪以及获取裁剪后的canvas内容。以下是使用这个库的基本步骤：

1. 首先，你需要安装`react-cropper`组件，可以使用npm或yarn进行安装：

   npm install react-cropper
   # 或者
   yarn add react-cropper

2. 在你的React组件中，导入`react-cropper`并创建一个Cropper组件，通常在模态框内：

   import React, { useRef } from 'react';
   import Cropper from 'react-cropper';

   function ImageEditor() {
     const cropperRef = useRef(null);

     // 当用户完成裁剪后，cropperRef.current.cropped将包含裁剪区域的数据
     const onCrop = (e) => {
       const croppedImage = cropperRef.current getCropped();
       // 使用croppedImage处理后续操作，例如更新状态或发送API请求
     };

     return (
       <div>
         {/* ...显示加载中... */}
         <Modal isOpen={isModalOpen} onClose={closeModal}>
           <Cropper
             ref={cropperRef}
             src={imageSrc}
             crop={(data) => onCrop(data)}
             // 其他配置项...
           />
         </Modal>
       </div>
     );
   }

3. 调整样式并设置好事件监听，如关闭模态框等。

当你需要返回裁剪后的canvas内容时，可以在`onCrop`回调函数中获取到`cropped`对象，它通常包含`width`, `height`, `x`, `y`, 和 `imgData`属性，`imgData`就是裁剪后的Base64编码的Canvas数据。

const canvasDataURL = `data:image/jpeg;base64,${cropped.imgData}`;