如何使用toDataURL（）從Canvas導出時壓縮.png圖像？

需要使用HTML5畫布生成約20k大小的.png圖像。不幸的是，使用toDataURL（）方法創建.png時，您無法像使用jpegs那樣指定質量。如何使用toDataURL（）從Canvas導出時壓縮.png圖像？

解決方法的任何想法？ toDataURL似乎是從Canvas生成圖像的唯一方法，並且畫布似乎是沒有服務器交互的圖像處理的最佳工具。感謝任何建議。

2014-09-25 user2348399

我不認爲這是比不過它發送回服務器，其他任何解決辦法[一文（http://blog.import.io/tech-blog/html5-canvas-todataurl- webm-vs-png-vs-jpeg）聲稱質量參數實際適用於PNG。 – 2014-09-25 23:48:34

謝謝德里克，儘管我還沒有運氣給PNG提供質量參數。本文提供了'降低'圖像的任何有趣的方式：http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation – user2348399 2014-09-29 18:49:49

PNG是一個無損壓縮格式。您可以使用jpg或webp進行壓縮，但不能與png一起使用。 https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/toDataURL – ElChiniNet 2015-12-10 02:54:15

有一種方法可以使用無損zlib放氣過程對PNG圖像進行壓縮http://www.w3.org/TR/PNG-Compression.html。有一個庫（https://github.com/ShyykoSerhiy/canvas-png-compression），當圖像類型爲'image/png'時，爲HTMLCanvasElement.toDataURL（）提供填充，並使得能夠向png的HTMLCanvasElement.toDataURL（）提供'quality'作爲第二個參數。

請注意，它僅在Chrome中提供更好的結果（較小的尺寸）。 Firefox有時比canvas-png-compression具有更好的壓縮（對於0.0.3版本）。

來源

2015-12-13 22:51:44

你可以通過縮小尺寸然後再放大它來做一些事情。

通過在較小的畫布上繪製縮小比例，然後獲取數據url。
創建一個圖像對象將數據url設置爲其源。原來的畫布此IMG對象（顯然onload事件回調內部）上
抽獎
查找畫布的大小比例由實驗了一下，給你最佳的結果。

來源

2016-02-08 20:11:04 ArJ

也是這個[link]（http://stackoverflow.com/questions/18761404/how-to-scale-images- on-a-html5-canvas-with-better-interpolation？lq = 1）以更好地縮小比例 – ArJ 2016-02-09 07:12:35

如何使用toDataURL（）從Canvas導出時壓縮.png圖像？

回答

相關問題