如何捕获图像的加载（react-easy-crop lib）

Question

如果我问错了问题我很抱歉

上传照片后，我希望裁剪区域变小。 （照片减少50％）该文档说使用“ onMediaLoaded”，但是由于某些原因它无法正常工作，也就是说，仅在再次上传照片后，裁剪区域的大小才会更改。

const [cropSize, setCropSize] = React.useState(null)
const onImageLoad = (img) => {
        const circleWidth = 50
        const circleSize = img.width < img.height
            ? (img.width * circleWidth) / 100
            : (img.height * circleWidth) / 100
        setCropSize({ width: circleSize, height: circleSize })
    }

<Cropper
   classes={{ containerClassName: styles.container }}
    image={`http://localhost:3000/${src}`}
     crop={crop}
     zoom={zoom}
     aspect={1}
     cropShape="round"
     showGrid={false}
     onCropChange={onCropChange}
     onCropComplete={onCropComplete}
     onZoomChange={setZoom}
     cropSize={cropSize}
     onMediaLoaded={onImageLoad}
/>                                

https://codesandbox.io/s/react-easy-crop-custom-image-demo-8gpbz

如果再次上传照片，您将看到裁剪区域如何变化

Answer 1

澄清一下，您问的是上传后如何调整大小？