初始化图像时，setCropBoxData react cropper不工作

Question

我有一个原始图像，我将其作为一个cropper的src传递。现在，我试图在cropper模态打开时设置调整后的图像宽度和高度，但不知何故，它没有设置现有图像的初始宽度和高度。有人能告诉我我做错了什么吗？

<Cropper
style={{ height: 390, width: '100%' }}
aspectRatio={16 / 9}
guides={false}
src={"https://tappio-development.s3.eu-central-1.amazonaws.com/user/1648980920749-tour-2-3.jpg"}
//   ref={(cropper) => {
//     this.cropper = cropper;
//   }}
viewMode={1}
dragMode="move"
cropBoxMovable={false}
zoomTo={zoom}
responsive={true}
onInitialized={(instance) => {
const img = new Image();
img.src = `https://tappio-development.s3.eu-central-1.amazonaws.com/user/1648980934596-tour-2-3.jpg`;
img.onload = () => {
//trying to load already width and height from already existing image
instance.setCropBoxData({
x: img.width,
y: img.height,
width: img.width,
height: img.height,
});
//setting to use cropper instance
setCropper(instance);
};
}}
/>

Answer 1

我不知道你是否已经找到了这个问题的解决方案，但我今天很难解决，提交了一份错误报告，并想出了一些对我来说还可以的方法。

const [cropper, setCropper] = useState()
useEffect(()=>{
if(cropper) cropper.setCropBoxData(the_data_object)
}, [cropper])
return <Cropper
onInitialized={instance => setCropper(instance)}
...src, etc
/>

我也尝试了useLayoutEffect，但没有工作，所以我认为react-cropper中的某个地方存在与渲染有关的竞争条件或操作顺序错误。无论如何，cropBoxData道具似乎坏了。

不管怎样，这对我很有效，也阻碍了我的进步。我希望它能帮助你和其他人！