Blob的DataUri与Base64字符串DataUri

时间:2019-02-15 12:59:31

标签: javascript base64 blob data-uri fileapi

如您所知&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);

此代码正在通过atob函数对base64编码的字符串变量reddotB64进行解码。然后,创建一个Blob对象并继续使用URL.createObjectURL函数。在那种情况下,由于我已经将reddotB64从base64解码为二进制文件并创建了一个类型为image / png的Blob,然后从该对象创建了对象url,所以我希望它可以工作,但不能工作。

您是否知道为什么它不起作用?还是我在标准上遗漏了什么?还是在JavaScript中做错了什么?

1 个答案:

答案 0 :(得分:0)

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