2

在我目前正在创建的 webappp 中，用户必须提供将服务器端存储在数据库中的图像。为了最小化服务器负载，我正在处理由 HTML5 Canvas 提供的图像大小调整客户端，并让用户预先批准调整大小图像的质量。

我遇到的问题是 - 调整大小的图像的文件大小很大。如果我使用 Paint.NET 调整相同图像的大小，我可以获得一个非常不错的轻量级 8 位 PNG 图像。即使是 32 位 Paint.NET 图像也比通过 toDataURL 在服务器上出现的图像要小。我尝试使用 toDataURL 质量参数，但更改它没有任何效果 - 完全相同的数据大小。

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

我知道我可以做一些服务器端图像处理，但如果可能的话我想避免这种情况。问题 - 我可以做些什么来减少从浏览器发送的图像文件大小？

4

1 回答 1

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/

于 2012-07-24T11:33:03.957 回答