如何从 blob:url 获取原始图像数据？

Posted 2023-03-22

【中文标题】如何从 blob:url 获取原始图像数据？

【英文标题】：how do i get raw image data from a blob:url?

【发布时间】：2021-09-06 23:07:09

【问题描述】：

我想将存储在 blob:url 中的图像保存到服务器，但我不知道如何从 blob URL 中提取原始数据。

现场演示： https://codesandbox.io/s/react-dom-camera-experiments-mjtii

图像来自相机包（尽管可能来自任何地方）。我添加了一些控制台输出以查看以下代码中发生的情况：

        onTakePhoto=(blobURL) => 
          console.log("blob", blobURL);
          new Response(blobURL).arrayBuffer().then((buffer) => 
            let data = new Uint8Array(buffer);
            console.log("blob typed arrayBuffer", data.length, data);

            // data is only 63 bytes in length?  
          );
        

图像 blob 的数组缓冲区长度为 63，所以我认为这不是整个图像文件，但我不知道如何访问它。如何访问 blobURL 中的原始数据？

非常感谢任何帮助

谢谢

【参考方案1】：

不同的方法都有效，但我发现这是最直接的：

fetch(blobURL)
  .then((response) => response.blob())
  .then((blob) => 
    blob.arrayBuffer().then((buffer) => 
      const array = new Uint8Array(buffer);
      // do anything with the byte array here
    
  )