javascript - Blob的DataUri与Base64字符串DataUri

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

假设我有一个base64编码的字符串，该字符串是根据最近很流行的图像生成的：) wikipedia中的“红点”图像。

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

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

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中做错了什么？

最佳答案

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