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

【问题标题】：Canvas as string with maximum compression?画布作为具有最大压缩率的字符串？
【发布时间】：2013-05-27 08:10:21
【问题描述】：

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

背景

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

问题是客户端代码在 javascript 中，画布数据需要从其中作为字符串发布到 java 服务。而不是从客户端逐块发送，如果我可以压缩，则在 java 端聚合画布并发送然后它会更容易。
是的，确实，在客户端使用 javascript 一次发送会更容易。随意尝试压缩，但请记住，它会在更大的数据上做得更好。您不能将 URL 发送到服务器，以便服务器可以为您做 html2canvas？
感谢 Dustin 的快速回复。不。我的应用程序中打包了 html2canvas 库。我只是传递了我需要捕获的元素。html2canvas 返回当前正在转换为的画布使用 toDataUrl() 的 base 64 格式，它将以 png 形式给出字符串。在此我可以进行进一步压缩吗？如果不是直接在画布上我不能应用压缩逻辑对吗？所以我必须先将画布转换为普通字符串.对此有什么想法吗？
也许您可以尝试估计可以传递给服务器的最大字符串大小。每当您的字符串太长时，您都应该尝试压缩 base64 字符串。但是这个字符串可能仍然太大......另一种方法是将 maxPostSize 设置为更高的值，以便您的服务器将接受更多数据（？）

【解决方案3】：

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

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

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

但除了改变形象本身，你只会获得一点点收获。

【讨论】：