如何将 blob 转换为 png 或 jpg？

Question

我已经使用 react-images-zoom-print https://www.npmjs.com/package/react-images-zoom-print 我正在用这样的 blob 拍摄 API 的照片：

  const downloadDepositMoneyInfosClickHandler = (row) => {
    TseBofService.getDepositMoneyPictureById(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
  })
}