【发布时间】：2012-12-19 21:25:43
【问题描述】：
许多文章展示了在客户端使用 canvas+html5 将 jpeg 文件转换为灰度的方法。但我需要的是在上传到我的服务器之前将图像转换为 8 位灰度以减小其大小。
用canvas+html5可以做到吗？
【问题讨论】：
标签： image-processing html5-canvas image-manipulation image-conversion
【发布时间】：2012-12-19 21:25:43
【问题描述】：
whatwg specification 提到了一个 toBlob 方法，它应该将画布转换为 jpeg 或 png 并为您提供二进制表示。不幸的是，它还没有得到广泛的支持。
因此，您所能做的就是使用 getImageData 获取原始图像数据的字节数组。在这个数组中，每个像素由 4 个字节表示：红色、绿色、蓝色和 alpha。您可以从中轻松计算灰度值 (gray = (red + green + blue) / 3 * alpha / 255;)。但是生成的数组将完全未压缩，因此它可能会比原始 jpeg 更大，即使它每个像素只使用 8 位。为了减小尺寸，您必须自己实现图像压缩算法。您可能会考虑使用 the DEFLATE algorithm used by PNG 而不是 JPEG encoding - 它更容易实现，不会引入更多伪影，因为它是无损的，并且在 8 位图像上表现良好。
应在服务器上添加用于将此压缩数据流转换为有效 PNG/JPEG 文件的样板数据（当您需要时）。
【讨论】：