reactjs-redux表单和材质ui框架—图像裁剪器

如何解决reactjs-redux表单和材质ui框架—图像裁剪器

我正在构建一个使用redux表单和材料ui框架的嵌套表单框架-到目前为止，我已经在此处构建了组件-https://codesandbox.io/s/gracious-mcnulty-v5wds

我想做的-添加一个图像裁剪器，该图像裁剪器会在图像上传时激活

这是基本的图片上传器概念

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>

有什么可以在不安装可能具有强制样式的模块的情况下更定制和更清洁地构建的。

我也很好奇-如果裁切工具可能很聪明-并为服务器创建3个图像大小，以便裁剪出来的拇指，裁剪出的中等尺寸，裁剪出的原始尺寸

https://www.thepolyglotdeveloper.com/2020/02/scale-crop-zoom-images-react-web-application/ https://www.npmjs.com/package/cropperjs https://medium.com/swlh/adding-crop-before-upload-in-react-22dfcf3a95b7 https://levelup.gitconnected.com/crop-images-on-upload-in-your-react-app-with-react-image-crop-5f3cd0ad2b35 https://codesandbox.io/s/q8q1mnr01w?file=/src/index.js Is there any good way to connect react-image-crop with react-dropzone? https://reactjsexample.com/a-react-component-to-crop-images-with-easy-interactions/