image-processing - Canvas+HTML5を使用したrgb-jpgから8ビット-jpgへのクライアント側の変換

Question

多くの記事は、クライアント側でcanvas+html5を使用してjpegファイルをグレースケールに変換する方法を示しています。しかし、私が必要としているのは、サーバーにアップロードする前に、画像を8ビットグレースケールに変換してサイズを小さくすることです。

canvas + html5を使用してそれを行うことは可能ですか？

Answer 1

whatwg仕様には、キャンバスをjpegまたはpngに変換し、バイナリ表現を提供することになっているtoBlobメソッドが記載されています。残念ながら、まだ広くサポートされていません。

したがって、getImageDataを使用して、生の画像データのバイトの配列を取得するだけです。この配列では、すべてのピクセルが赤、緑、青、アルファの4バイトで表されます。これからグレースケール値を簡単に計算できます（gray = (red + green + blue) / 3 * alpha / 255;）。ただし、結果の配列は完全に非圧縮になるため、ピクセルあたり8ビットしか使用しない場合でも、元のjpegよりもさらに大きくなる可能性があります。サイズを小さくするには、画像圧縮アルゴリズムを自分で実装する必要があります。JPEGエンコーディングの代わりにPNGで使用されるDEFLATEアルゴリズムを使用することを検討してください。実装がはるかに簡単で、ロスレスであるためアーティファクトが追加されることはなく、8ビット画像で非常に優れたパフォーマンスを発揮します。

この圧縮データストリームをバイアルPNG/JPEGファイルに変換するための定型データをサーバーに追加する必要があります（必要な場合）。