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

Question

我想将存储在 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 中的原始数据？

非常感谢任何帮助

谢谢

Answer 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
    }
  })
}