在我正在创建的webappp中,用户必须提供将数据库存储在服务器端的图像。为了最大限度地减少服务器负载,我正在处理图像大小调整客户端礼貌的HTML5 Canvas,并让用户预先批准调整大小的图像的质量。
我遇到的问题是这个 - 调整大小的图像的文件大小很大。如果我使用Paint.NET调整相同的图像大小,我可以得到一个非常体面的轻量级8位PNG图像。甚至32位的Paint.NET图像也小于通过toDataURL在服务器上显示的图像。我尝试使用toDataURL质量参数,但更改它没有任何影响 - 完全相同的数据大小。
我应该提一下,我正在使用Chrome 20.0.1132.57 m进行测试,并且与该应用相关的唯一浏览器是Chrome和Safari的桌面版本。
我知道我可以做一些服务器端图像处理,但我想尽可能避免这种情况。问题 - 如果有什么办法可以减少从浏览器发出的图像文件大小,该怎么办?
答案 0 :(得分:2)
浏览器可能会高兴地忽略为toDataUrl等提供的任何质量参数。我不认为遵守规范是强制性的。
完全控制质量的唯一方法是
在JS中编写您自己的PNG压缩器或使用可以从互联网中窃取的内容https://github.com/imaya/CanvasTool.PngEncoder
将<canvas>
数据转储到ArrayBuffer
将此传递给WebWorker
让WebWorker使用您的PNG压缩器库压缩它
我相信已经存在JPEG / PNG编码和解码解决方案。
备选你可以尝试canvas.mozGetAsFile()/ canvas.toBlob(),但我相信浏览器仍然不会尊重质量参数。