ダウンスケーリングによる再サンプリングにより画質が低下しますか?

ここでの目標は、ブラウザ環境で画質を維持しながら画像のサイズを縮小することです。この問題は、HTML5 キャンバスを使用して画像をスケールダウンするときに発生し、画像の劣化が生じます。

ダウンスケーリングと補間

ダウンスケーリングと補間は別個の手法です。ダウンスケーリングとは、ソース イメージ内のピクセルを結合して宛先イメージ内のピクセル数を減らすことによってイメージの寸法を縮小することを指します。一方、補間とは、スケール アップ時に宛先イメージ内に新しいピクセルを作成することを指します。ダウンスケーリングのコンテキストでは、補間は無関係です。

ピクセル パーフェクト ダウンスケーリング

問題はブラウザのダウンスケーリングの実装にあります。この実装では、ソース画像から 1 つのピクセルを選択して、宛先イメージ内の各ピクセルを表します。これにより、ディテールやノイズが失われる可能性があります。

解決策: ピクセル パーフェクト ダウンスケーリング アルゴリズム

ピクセル パーフェクト ダウンスケーリング アルゴリズムにより、すべてのソース ピクセルが 1 つ、2 つ、または 4 つのデスティネーション ピクセルに寄与するようになります。ピクセルの重なりに応じて。このアルゴリズムは、各ソース ピクセルを取得し、その重みとターゲット ピクセルおよびその隣接ピクセル内の次の重みを計算します。次に、重みを使用して、ターゲット ピクセルに対するソース ピクセルの寄与が計算されます。

実装の詳細

提供された JavaScript コードは、ピクセル完璧なダウンスケーリング アルゴリズムを提供します。中間ピクセル値を格納する float32 配列を作成します。これは、ターゲット イメージの 3 倍のサイズです。

制限事項

このアルゴリズムは高品質のダウンスケーリングを提供しますが、getImageData 関数と putImageData 関数を使用するため、大きい画像の処理が遅くなる可能性があります。

その他の考慮事項

小さい画像の場合は、HTML5 キャンバスの組み込みスケーリング メカニズムを使用して、小さい画像用に最適化されるため、ダウンスケーリングを複数回実行できます。大きな画像の場合は、CSS や WebGL などの他の方法を使用して縮小することを検討してください。