如何將 blob 轉換為 png 或 jpg？

Question

我使用了react-images-zoom-print https://www.npmjs.com/package/react-images-zoom-print我正在為 API 拍一張像這樣的 blob 的照片：

     const downloadDepositMoneyInfosClickHandler = (row) => {
       props.service(row.id, (status, data) => {
          var blob = new Blob([data], { type: "image/png" });
          var objectUrl = URL.createObjectURL(blob);
          imageRef.current = objectUrl;
          setImgDialogOpen(true);
        });
      };

>    console.log(imageRef.current)==>
         blob:http://localhost:3000/c85aiua36d-2fua-43a8-a881-311d287ed37e

在燈箱中：

       <Lightbox
            images={[{src:"'"+imageRef.current+"'"}]}
            isOpen={imgDialogOpen}
            onClose={closeImgDialog}
            rotatable={true}
            zoomable={true}
            onPrint={() => window.print()}
          />

但它沒有顯示它，我認為它應該成為png或jpg 。 我想把它變成一張png或jpg類型的照片。

我應該如何轉換它？

Answer 1

試試這個：

const blobToImage = (blob) => {
  return new Promise(resolve => {
    const url = URL.createObjectURL(blob)
    let img = new Image()
    img.onload = () => {
      URL.revokeObjectURL(url)
      resolve(img)
    }
    img.src = url
  })
}