javascript - toDataURL() 文件大小增加

Question

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

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

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

Answer 1

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

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

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