Blob 的 DataUri 与 Base64 字符串 DataUri

Question

正如您所知并在 w3 中所述，可以使用 Blob 的 createObjectUrl 在 javascript 中为 Blob 对象创建 url。另一方面，如果我们有一个 Base64 编码字符串的数据，我们可以将其呈现为格式为“data[MIMEType];base64,[data>]”的 Url。

假设我有一个 Base64 编码的字符串，它是从当今非常流行的图像生成的：）维基百科中的“红点”图像。

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";

我 100% 确定，如果我创建一个符合上述数据 URI 方案的 URL，那么我将能够放置一个链接元素并从浏览器下载它：请参阅下面的代码示例：

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);

这工作得很好，并在新选项卡中显示图像。另一方面，我将尝试使用 Blob 创建链接，如下所示：

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);

reddotB64此代码通过函数解码 Base64 编码的字符串变量atob。然后，创建一个 Blob 对象并继续执行URL.createObjectURL函数。在这种情况下，由于我已经reddotB64从 base64 解码为二进制并创建了一个 image/png 类型的 Blob，然后从中创建了对象 url，我希望它能够工作，但它不起作用。

您知道为什么它不起作用吗？或者我遗漏了标准中的任何内容？或者在 Javascript 中做错了什么？

Answer 1

这就是答案。看起来这是一个编码问题。为了将 Base64 字符串转换/解码为二进制（UInt8Array/byte），使用atob是不够的。使用后atob需要使用UTF-16字符代码：我们通过对charCodeAt解码字符串中的每个字符使用函数来实现这一点。结果我们得到了 UTF-16 编码的二进制字符串，它肯定可以工作。只需创建一个Blob然后调用URL.createObjectURL.