javascript - 画布作为具有最大压缩率的字符串？

Question

我有一个 PNG 图像并获得了它的 Base64 PNG 字符串表示。它仍然很大，我想知道它是否可以进一步压缩。这甚至可能吗？

背景

我正在使用 html2canvas 创建当前网页的屏幕截图，将其转换为 base64（使用 canvas.toDataURL()）字符串并将其发送到服务器。但如果该字符串大小太大，服务器将返回异常。

以字符串形式压缩画布的最有效方法是什么？

非常感谢任何帮助。提前致谢。

Answer 1

请记住，在大多数情况下，压缩将使用字典或其他方法来压缩数据。如果不能很好地压缩基本字符串，这将考虑更大的压缩数据。您必须找到压缩后会导致较小尺寸的图片尺寸！

也许另一种方法会有所帮助。如果您只发送 URL，服务器不能为您执行 html2canvas 吗？你能把数据分成更小的缓冲区，然后尝试发送它们吗？也许您应该遍历数据的大小，将其拆分为 64 KB 缓冲区并传输它们（请记住，您需要在服务器端验证哪个缓冲区属于哪个数据包）。

否则尝试 GZIP、LZW、LZMA 算法。也许您还可以使用工具来压缩 html2canvas 创建的图像？

Answer 2

你可能无法从这里到达那里。您可能需要找到一种不同的方式来获取图像，而不是尝试将其填充到 URL 中。

为了获得小幅收益，您可以尝试使用pngcrush使 PNG 图像更小，或者更猛烈地通过降低分辨率和/或颜色数量来直接减小 PNG 图像的大小。

您还可以使用与 Base64 不同的编码方案，通过使用超过 64 个编码字符来挤出更多字符。您可以使用 66 个未保留字符，此外，您还可以使用 18 个保留字符中的许多字符，具体取决于 URL 的语法。

但除了改变形象本身，你只会获得很小的收获。

Answer 3

如果您要压缩字符串，我建议在客户端使用压缩库，例如http://rosettacode.org/wiki/LZW_compression#JavaScript和http://webdevwonders.com/lzw-compression- and-decompression-with-javascript-and-php/在服务器端解压（假设你使用php）。这种方法的优点是在客户端和服务器端都可以工作，并且使用了广受好评的 LZW 算法。