JavaScript - Canvas の画像圧縮の原理は何ですか?

Question

キャンバスの toDataURL メソッドでは、圧縮後の画像の形式と圧縮品質を指定できます。たとえば、画像を WebP 形式に圧縮します。 リーリー

toDataURL は、base64 を使用して画像をエンコードし、エンコードされたソース ファイルはエンコード前より 33% 大きくなります。アドレスを参照してください。ただし、quality パラメーターで圧縮品質を指定でき、より圧縮品質が近くなります。 0にすると、画像圧縮が強くなります。

質問 1: Base64 エンコードを使用して画像ソース ファイルを拡大すると、Base64 で画像を圧縮できますか?

質問 2: 小さな画像を Base64 でエンコードするのは、http リクエストを減らすためだけですか?

質問 3: Canvas で toDataURL メソッドを使用して画像を圧縮する原理は何ですか?品質パラメータは具体的に何をするのでしょうか?

Answer 1

base64 は、1 文字に 6 ビットが対応するというルールに従って、画像に対応するバイナリ コードのみを変換します。トランスコード後のファイルは、元の画像ファイルよりも大きくなります。ただし、小さい画像の場合、変換後に送信される追加バイトは、追加の http 接続を確立するよりもはるかに安価であるため、base64 を使用して小さい画像をトランスコードし、ページの読み込み速度を向上させます。
画像圧縮の原理については、簡単に言うと、画像上の色の違いをアルゴリズムによって削減し、画質を犠牲にします。例えば、似た色の4つのピクセルの色情報は、圧縮前では約16バイトありましたが、圧縮後は1色に換算すると4倍近く削減できます。品質は色差の強度を制御するために使用され、値が小さいほど強度が高くなります。当然、圧縮後のファイルは小さくなり、画質は低くなります。もっと悪い

Answer 2

1. まさか

2. は

です

3. 画像エンコード形式の品質を制御します。たとえば、webp は、品質が高くなるほど損失が小さくなり、ファイル サイズが大きくなります。