Blob 的 DataUri 与 Base64 字符串 DataUri答案

【问题标题】：Blob's DataUri vs Base64 string DataUriBlob 的 DataUri 与 Base64 字符串 DataUri
【发布时间】：2019-07-09 15:08:38
【问题描述】：

如您所知 &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，那么我将能够放置一个链接元素并从浏览器下载它：请参阅下面的代码示例：

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

【问题讨论】：

标签： javascript base64 blob data-uri fileapi

【解决方案1】：

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

【讨论】：