HTML5 Canvas toDataURL 8 位？答案

【问题标题】：HTML5 Canvas toDataURL 8 bit?HTML5 Canvas toDataURL 8 位？
【发布时间】：2012-07-24 05:08:54
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html5-canvas

【解决方案1】：

浏览器可能很乐意忽略为 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/

【讨论】：