将文件读取到 blob 并在 javascript 中显示

Question

所以我正在尝试创建一个功能的基本原型。本质上，最终目标是接收 Base64 编码的字符串和支持的 mime 类型并生成文件并从 HTML 5 应用程序提供该文件。现在，我正在简单地获取一个文件，将其转换为 Blob，然后显示它，所有这些都是从内存中完成的。

   var blobfile = atob(base64);
   window.blobFromBlob = new Blob([binaryString], {
     type: MIMEType
   });
   window.blobURL = URL.createObjectURL(window.blobFromBlob);
   var a = "<a href=\"" + window.blobURL + "\">Binary Blob Link</a>";
   document.getElementById('byte_content').innerHTML = a;

我创建了一个JSFiddle来展示我遇到的问题。当我将 JPEG 放入其中，然后尝试提供它时，img 标签会显示损坏的图像。我从没想过 Base64 blob 能工作，但我确实希望二进制 blob 和来自 base 64 的 blob 能工作。

谁能看到我哪里出错了？

谢谢！

注意：我设法通过从 更改为 来显示二进制readAsBinaryString文件readAsArrayBuffer

atob注2：我开始怀疑它与和有关btoa

Answer 1

因此，如果其他人偶然发现了这一点并发现它很有用，我可以在这篇 stackoverflow 文章的帮助下解决这个问题。解决方案涉及保留readAsBinaryString为文件读取方法。创建 Base64 字符串btoa，然后使用提到的 stackoverflow 文章b64toBlob中找到的函数。

这是调整后的 JSFiddle，展示了我如何让它工作。

https://jsfiddle.net/ajwhiteway/vstj3bcm/1/