如何将原始二进制数据转换为 blob 并将其显示在 img 标签中？

Question

我正在用 Electron 和 Svelte 制作梦想中的期刊应用程序。我有一个包含标题、描述和一个或多个图像的自定义文件格式。参见：

程序输入

文件输出

当我需要时，我可以调用 ipcRenderer.invoke() 在主进程中读取文件，然后 return 在渲染进程中检索它（别担心，我使用 async await 来确保我不只是得到一个承诺。此外，为了我的测试，我只发回图像的 Uint8Array 代表).

在尝试显示图像但失败后，我决定检查一下我是否按预期收到了信息。我将响应 as-is 发送回主进程并将其写入文件。当我在 Paint 中打开文件时，它显示。

所以，信息是正确的。这是我尝试显示图像的代码：

在<script>

内

let src;
onMount(async () => {
  let a = await ipcRenderer.invoke("file-read");
  console.log(a);
  let blob = new Blob(a, {type: 'image/png'});
  console.log(blob);
  ipcRenderer.send("verify-content", a); // this is the test I mentioned, where it was written to a file
  src = URL.createObjectURL(blob);
});

在body

{#if src}
  <img src={src} />
{/if}

我也试过另一种方式：

在<script>

内

onMount(async () => {
  let a = await ipcRenderer.invoke("file-read");
  console.log(a);
  let blob = new Blob(a, {type: 'image/png'});
  console.log(blob);
  ipcRenderer.send("verify-content", a);
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  img.onload = function() {
    URL.revokeObjectURL(this.src);
  }
  document.getElementById("target").appendChild(img);
});

在body

<div id="target"></div>

然而，这就是我得到的：

不显示。我怎样才能显示这个图像？我发现的所有其他“blob 到 img”示例都使用了 type="file" <input /> 标记。如果可能，我想避免使用 Base64 数据 URI。谢谢。

Answer 1

事实证明，当我用它制作 blob 时，我必须将 Uint8Array 包装在一个数组中 (wtf)。

let blob = new Blob([a], {type: "image/png"});