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

Question

需要使用HTML5画布生成大约约20k的.png图像.不幸的是,在使用toDataURL()方法创建.png时,您无法像使用jpegs那样指定质量.

任何解决方法的想法？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() 提供垫片，并能够提供“质量”作为第二个参数为 HTMLCanvasElement.toDataURL()（对于 png）。

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