HTML5 Canvas toDataURL 8位?

时间:2012-07-24 05:08:54

标签: html5-canvas

在我正在创建的webappp中,用户必须提供将数据库存储在服务器端的图像。为了最大限度地减少服务器负载,我正在处理图像大小调整客户端礼貌的HTML5 Canvas,并让用户预先批准调整大小的图像的质量。

我遇到的问题是这个 - 调整大小的图像的文件大小很大。如果我使用Paint.NET调整相同的图像大小,我可以得到一个非常体面的轻量级8位PNG图像。甚至32位的Paint.NET图像也小于通过toDataURL在服务器上显示的图像。我尝试使用toDataURL质量参数,但更改它没有任何影响 - 完全相同的数据大小。

我应该提一下,我正在使用Chrome 20.0.1132.57 m进行测试,并且与该应用相关的唯一浏览器是Chrome和Safari的桌面版本。

我知道我可以做一些服务器端图像处理,但我想尽可能避免这种情况。问题 - 如果有什么办法可以减少从浏览器发出的图像文件大小,该怎么办?

1 个答案:

答案 0 :(得分:2)

浏览器可能会高兴地忽略为toDataUrl等提供的任何质量参数。我不认为遵守规范是强制性的。

完全控制质量的唯一方法是

  • 在JS中编写您自己的PNG压缩器或使用可以从互联网中窃取的内容https://github.com/imaya/CanvasTool.PngEncoder

  • <canvas>数据转储到ArrayBuffer

  • 将此传递给WebWorker

  • 让WebWorker使用您的PNG压缩器库压缩它

我相信已经存在JPEG / PNG编码和解码解决方案。

备选你可以尝试canvas.mozGetAsFile()/ canvas.toBlob(),但我相信浏览器仍然不会尊重质量参数。

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