Blob 的 DataUri 与 Base64 字符串 DataUri

Question

如您所知 & stated in w3 it is possible to create a url for a Blob object in javascript by using Blob's createObjectUrl. On the other hand, if we have a data as a Base64 encoded string we can 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 创建 link，如下所示：

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 function. And then, creating a Blob object and continues with URL.createObjectURL 函数解码 base64 编码的字符串变量 reddotB64。在这种情况下，由于我已经将 reddotB64 从 base64 解码为二进制并创建了一个 image/png 类型的 Blob，然后从中创建了对象 url 我希望它可以工作，但它不工作。

您知道为什么它不起作用吗？还是我遗漏了标准中的任何内容？或者在 Javascript 中做错了什么？

Answer 1

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

Blob 的 DataUri 与 Base64 字符串 DataUri

Blob's DataUri vs Base64 string DataUri

javascript

base64

blob

fileapi

data-uri