javascript - 尝试在 Chrome 中下载内嵌图像时，文件大小是多少？

Question

我正在浏览器中生成 GIF，因此我可以使用的唯一链接是内联数据 URL。 (如data:image/gif;base64,...)

我想允许用户下载他们创建的 GIF。为了使其像单击链接一样简单，我使用 an a[download]像这样:

<a download="GIF" href="data:image/gif;base64,...">Download</a>

对于小文件，这将打开我的 MacOS“另存为”对话框。有了这个 GIF，它就不会了。当我点击该链接时，除了 Chrome 图标变为如下所示之外，没有任何反应:

当我右键单击 GIF 并选择“图像另存为”时，我可以很好地保存它。这让我看到 GIF 高达 3MB。

我已经检查了一个以通常方式链接的大文件，a[download] 链接工作得很好。这似乎只是内联数据 URL 文件的问题。

文件大小有限制吗？

<小时/>

奖励问题:

• 为什么有文件大小限制？
• 有解决方法吗？

Answer 1

TL;DR:数据 URL 大小限制为 2 MiB。 See this demo .

--

这意味着文件大小比这个小一点，如 a base64-encoded image is about 37% larger than the original .

另请注意，它的限制为 2 Mebibyte，因此“2 MiB”带有小“i”。 As explained here ，这意味着限制为 2 * 2^20 = 2,097,152 字节，或熟悉的以十为基数的兆字节 (MB) 的 2.097。

如the demo所示，这意味着可以正常下载 1.568 MB 文件，但 Chrome 无法下载 1.581 MB 文件。

<小时/>

• Chrome 为什么要这样做？不确定。看起来这可能是一个错误。
• 解决方法:不确定。您可以尝试按照@roland-starke的建议使用URL.createObjectUrl，或者在新选项卡中打开数据URL