javascript - Blob 的 DataUri 与 Base64 字符串 DataUri

Question

如你所知&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 中做错了什么？

Answer 1

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