Blob的DataUri与Base64字符串的DataUri

Question

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

假设我有一个Base64编码的字符串，它是从这些日子里非常流行的图像生成的 :) "红点"图像在维基百科上。

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

我非常确定，如果我创建一个符合上述Data URI Scheme的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);

这段代码通过atob函数解码base64编码的字符串变量reddotB64。然后，创建一个Blob对象并继续使用URL.createObjectURL函数。在这种情况下，由于我已经将reddotB64从base64解码为二进制，并创建了一个类型为image/png的Blob，然后从中创建了对象URL，所以我希望它能正常工作，但它没有工作。

你知道为什么它不起作用吗？或者我在标准方面漏掉了什么？还是在Javascript方面做错了什么？

- rebulanyum

Answer 1

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

- rebulanyum