image-processing - 使用 Canvas+HTML5 将 rgb-jpg 客户端转换为 8-bit-jpg

Question

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

是否可以使用canvas+html5来实现？

Answer 1

whatwg specification提到了一个 toBlob 方法，该方法应该将 Canvas 转换为 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 文件的样板数据添加到服务器上(当您需要时)。