在我当前正在创建的 webappp 中，用户必须提供存储在服务器端数据库中的图像。为了最大限度地减少服务器负载，我正在处理 HTML5 Canvas 客户端的图像大小调整，并让用户预先批准调整大小后的图像的质量。
我遇到的问题是 - 调整大小后的图像的文件大小很大。如果我使用 Paint.NET 调整相同图像的大小，我可以获得完美的轻量级 8 位 PNG 图像。即使 32 位 Paint.NET 图像也比通过 toDataURL 在服务器上显示的图像小。我尝试使用 toDataURL 质量参数，但更改它没有任何效果 - 数据大小完全相同。
我应该提到，我正在使用 Chrome 20.0.1132.57 m 进行测试，与该应用程序相关的唯一浏览器是 Chrome 和 Safari 的桌面版本。
我知道我可以进行一些服务器端图像处理，但我想尽可能避免这种情况。问题 - 如果我可以做些什么来减少从浏览器发送的图像文件大小？
最佳答案
浏览器可能会很乐意忽略为 toDataUrl 等提供的任何质量参数。我不认为规范强制要求遵守它。
精确控制质量的唯一方法是
用 JS 编写自己的 PNG 压缩器或使用可以从互联网上窃取的东西 https://github.com/imaya/CanvasTool.PngEncoder
转储
<canvas>数据到ArrayBuffer将其传递给 WebWorker
让 WebWorker 使用您的 PNG 压缩器库对其进行压缩
我相信已经存在JPEG/PNG编码和解码解决方案。
您也可以尝试canvas.mozGetAsFile()/canvas.toBlob()，但我相信浏览器仍然不会尊重质量参数。
关于html5-canvas - HTML5 Canvas toDataURL 8 位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11624484/