YaoKaiLun/react-img-editor

设置visible时候,二次打开无法渲染图片

dodospace opened this issue · 1 comments

我用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>
`

非问题,原因是因为我在初始化的时候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);
    };
  };
`