toDataURL() 文件大小增加答案

【问题标题】：toDataURL() file size increasetoDataURL() 文件大小增加
【发布时间】：2015-02-25 10:51:24
【问题描述】：

当我在浏览器中上传某个文件时，文件类型为 jpeg，文件大小为 2MB，但当我使用canvas.toDataURL() 将文件编码为 base64 时，生成的文件大小约为 9MB。

为什么base64编码的文件比原文件大3-4倍？

我看到我可以为toDataURl(type, quality) 指定一个选项，但我不能将它用于png 文件，只能用于jpeg，我想要一个png。

【问题讨论】：

因为64小于256。
重申一下，base64 意味着原始文件的每个字节都存储在三个字节的 ASCII 文本中。因此，它在设计上要大 3 倍。这很有用，因为 base64 的每个字节都是 URL 安全的，而大多数字节通常不是。
它不是大 3 倍，而是大 1/3。这是因为一个典型的字节编码为 8 位 (2^8 == 256)，而 Base64 编码的字符只能容纳 6 位 (2^6 == 64)。一个明显的例子是：btoa('hi there my friend... ;)').length (32) 与 'hi there my friend... ;)'.length (24)。这里的问题是您从 jpeg 文件开始并转到 png。 Jpeg 具有有损压缩，而 png 具有无损压缩（它是原始 bmp 文件大小的 1/4）。

【解决方案1】：

Bade-64 只会（并且总是）使二进制表示大 33%。这是因为三个八位字节分布在四个字节上，因此这些字节的值可以表示为可打印的 ASCII 字符，因此可以安全传输。

最终大小由需要编码的二进制数组决定。此外，在编码数据之前还会有几个字节的 uri-header。

PNG 文件是无损的，并且往往比 JPEG 大（但并非在所有情况下）。预计我们将不得不处理独立于使用 PNG 文件时遵循的 Base-64 编码的较大文件。 PNG 也有可变压缩，因为它使用 gzip 压缩图像数据，但不幸的是，我们无法通过 context 方法访问它。

【讨论】：