Many articles shows ways of converting jpeg files to grayscale using canvas+html5 at the client-side. But what I need is to convert an image to 8bit grayscale to reduce its size before uploading to my server.
Is it possible to do it using canvas+html5?
whatwg规范提到了一个 toBlob 方法，它应该将画布转换为 jpeg 或 png 并为您提供二进制表示。不幸的是，它还没有得到广泛的支持。
因此，您所能做的就是使用 getImageData 来获取原始图像数据的字节数组。在这个数组中，每个像素由 4 个字节表示：红色、绿色、蓝色和 alpha。您可以通过此 ( ) 轻松计算灰度值gray = (red + green + blue) / 3 * alpha / 255;。但是生成的数组将完全未压缩，因此它可能会比原始 jpeg 更大，即使它每个像素只使用 8 位。为了减小尺寸，您必须自己实现图像压缩算法。您可能会考虑使用PNG 使用的 DEFLATE 算法而不是JPEG 编码- 它更容易实现，不会引入进一步的伪影，因为它是无损的，并且在 8 位图像上表现良好。
应在服务器上添加用于将此压缩数据流转换为有效 PNG/JPEG 文件的样板数据（当您需要时）。