设置visible时候,二次打开无法渲染图片
dodospace opened this issue · 1 comments
dodospace commented
我用antd的Modal进行点击编辑,当关闭的时候,再次打开ReactImgEditor的时候,图片就无法渲染了。
<Modal
visible={!isEmpty(editImage)}
width={editImage?.width}
wrapClassName={styles.edit_modal}
onCancel={onClose}
footer={false}
destroyOnClose
>
{!isEmpty(editImage) && (
<ReactImgEditor
key={editImage?.url}
src={editImage?.url}
width={editImage?.width}
height={editImage?.height}
plugins={[]}
getStage={setStage}
crossOrigin="anonymous"
/>
)}
<div className={styles.image_operator}>
<Space>
<Button onClick={onClose}>取消</Button>
<Button type="primary" onClick={onSave}>
保存
</Button>
</Space>
</div>
</Modal>
`
dodospace commented
非问题,原因是因为我在初始化的时候createObjectURL存储,并获取了高度,使用的时候未加onload,导致取不到宽高,无法显示
const onEdit = (id: string) => {
const item = find(imageList, (o) => o.id === id);
const image = new Image();
image.src = item.url;
image.onload = () => {
const { width, height } = image;
const oWidth = window.innerWidth;
const oHeight = window.innerHeight;
const imageItem = {
id: item.id,
url: item?.url,
width: width >= oWidth * 0.8 ? width * 0.8 : width,
height: height >= oHeight * 0.8 ? height * 0.8 : height,
};
setEditImage(imageItem);
};
};
`