需要使用 HTML5 画布生成大小约为 20k 的 .png 图像。不幸的是，当使用 toDataURL() 方法创建 .png 时，您无法像使用 jpeg 那样指定质量。
任何解决方法的想法？toDataURL 似乎是从 Canvas 生成图像的唯一方法，而 canvas 似乎是无需服务器交互的图像处理的最佳工具。感谢任何建议。
问问题
6150 次
2 回答
3
有一种方法可以使用无损 zlib deflate 过程http://www.w3.org/TR/PNG-Compression.html对 PNG 图像进行压缩。有一个库（https://github.com/ShyykoSerhiy/canvas-png-compression）在图像类型为“image/png”时为 HTMLCanvasElement.toDataURL() 提供 shim，并能够提供“质量”作为第二个参数到 HTMLCanvasElement.toDataURL() 为 png。
请注意，它仅在 Chrome 中提供更好的结果（更小的尺寸）。Firefox 有时具有比 canvas-png-compression 更好的压缩（对于 0.0.3 版本）。
于 2015-12-13T22:51:44.350 回答
1
你可以通过缩小它然后再次放大它来做一些事情。
通过在较小的画布上绘制来缩小，然后获取数据 url。
创建一个图像对象，将数据 url 设置为其源。
使用这个 img 对象在原始画布上绘制（显然在 onload 事件回调中）
通过尝试一下，找到画布的尺寸比例，为您提供最佳效果。
于 2016-02-08T20:11:04.863 回答