javascript - 使用 toDataURL() 从 Canvas 导出时如何压缩 .png 图像？

Question

需要使用 HTML5 Canvas 生成大约 20k 大小的 .png 图像。不幸的是，当使用 toDataURL() 方法创建 .png 时，您不能像使用 jpeg 那样指定质量。

有什么解决方法吗？ toDataURL 似乎是从 Canvas 生成图像的唯一方法，而 canvas 似乎是无需服务器交互的图像处理的最佳工具。感谢任何建议。

Answer 1

有一种方法可以使用无损 zlib deflate 过程对 PNG 图像进行压缩 http://www.w3.org/TR/PNG-Compression.html .有一个库 ( https://github.com/ShyykoSerhiy/canvas-png-compression ) 在图像类型为“image/png”时为 HTMLCanvasElement.toDataURL() 提供 shim，并能够为 png 提供“质量”作为 HTMLCanvasElement.toDataURL() 的第二个参数。

请注意，它仅在 Chrome 中提供更好的结果(更小的尺寸)。 Firefox 有时比 canvas-png-compression 有更好的压缩(对于 0.0.3 版本)。