HTML5 Canvas toDataURL 8位？

Question

在一個webappp我目前正在創建用戶必須提供圖像，獲取存儲在數據庫中的服務器端。爲了最大限度地減少服務器負載，我正在處理圖像大小調整客戶端禮貌的HTML5畫布，並讓用戶預先批准調整大小的圖像的質量。

我遇到的問題是這個 - 調整大小的圖像的文件大小很大。如果我用Paint.NET調整相同的圖像，我可以得到一個完美體面的輕量級8位PNG圖像。即使是32位的Paint.NET圖像也比通過toDataURL在服務器上啓動的圖像要小。我嘗試過使用toDataURL質量參數，但改變它沒有任何影響 - 完全相同的數據大小。

我應該提到，我正在使用Chrome 20.0.1132.57 m進行測試，並且與該應用程序相關的唯一瀏覽器是Chrome和Safari的桌面版本。

我知道我可以做一些服務器端圖像處理，但我想避免，如果可能的話。問題 - 如果我能做些什麼來減少從瀏覽器發出的圖像文件大小？

Answer 1

瀏覽器可能會高興地忽略爲toDataUrl等提供的任何質量參數。我不相信這個規範是強制性的。

控制質量的唯一途徑究竟是

• 自己寫的PNG壓縮機JS或使用的東西，你可以從互聯網絡https://github.com/imaya/CanvasTool.PngEncoder

• 轉儲<canvas>數據竊取到ArrayBuffer

• 傳遞給WebWorker

• 讓WebWorker使用您的PNG壓縮程序庫對其進行壓縮

我相信已存在JPEG/PNG編碼和解碼解決方案。

另外，你可以嘗試canvas.mozGetAsFile（）/ canvas.toBlob（），但我相信瀏覽器仍然不會承諾質量參數。

https://developer.mozilla.org/en/DOM/HTMLCanvasElement/