Image processing 使用Canvas+；HTML5

许多文章展示了在客户端使用canvas+html5将jpeg文件转换为灰度的方法。但我需要的是在上传到我的服务器之前将图像转换为8位灰度以减小其大小

使用canvas+html5可以吗？

提到了一种toBlob方法，该方法可以将画布转换为jpeg或png，并提供二进制表示。不幸的是，它还没有得到广泛的支持

所以，您所能做的就是使用getImageData获取原始图像数据的字节数组。在这个数组中，每个像素由4个字节表示：红色、绿色、蓝色和alpha。您可以很容易地从中计算灰度值（

gray=（红+绿+蓝）/3*alpha/255；

）。但最终生成的数组将完全未压缩，因此它可能比原始jpeg更大，尽管它每像素仅使用8位。为了减小尺寸，您必须自己实现图像压缩算法。您可能会考虑使用而不是——更容易实现，不引入更多的工件，因为它是无损的，并且在8位图像上表现良好。

将此压缩数据流转换为vialid PNG/JPEG文件的样板数据应添加到服务器上（需要时）