Blob的DataUri与Base64字符串DataUri

Question

如您所知＆stated in w3，可以使用Blob的createObjectUrl在javascript中为Blob对象创建URL。另一方面，如果我们将数据作为Base64编码的字符串，我们可以使用格式为“data [MIMEType]; base64，[data>]”的present it as a Url。

让我们假设我有一个base64编码的字符串，它是从这些日子非常流行的图像生成的：“wikipedia中的红点”图像。

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

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