Lanczos リサンプリングは HTML5 キャンバス画像のサイズ変更をどのように改善できるのでしょうか?

HTML5 Canvas での高品質画像のサイズ変更の実装

問題の概要

JavaScript と Canvas 要素を使用して画像のサイズを縮小しようとすると、結果画像には、望ましくないアーティファクトやぼやけたピクセルが表示されることがよくあります。評判の良い画像操作 Web サイトと同じコードを使用したプロトタイプがあるにもかかわらず、結果は一貫して悪いです。

解決策

ブラウザーや既存のキャンバス手法で採用されている従来のリサンプリング手法では、高品質の画像を生成するには不十分です。 -高品質のサムネイル。この欠陥に対処するために、JavaScript で実装されたランチョスベースのリサンプリング アルゴリズムを導入します。このメソッドは、構成可能なカーネルを使用して画像データをフィルタリングし、視覚的に魅力的なダウンサイジングを実現します。

thumbnailer クラス

thumbnailer クラスは、lanczos ベースのリサンプリング プロセスをカプセル化します。 Canvas 要素、元のイメージ、および必要なダウンスケールされた幅を使用して初期化されます。

舞台裏では、process1 メソッドがソース イメージの行ごとのスキャンを実行し、各宛先ピクセルの加重平均を計算します。 。 process2 メソッドは、リサンプリングされたイメージを再構築し、キャンバス要素にレンダリングします。

カスタム JavaScript アルゴリズム

この実装の鍵は、フィルタリング用の Lanczos カーネルを生成する lanczosCreate 関数にあります。この関数は、カーネル ローブの数を調整することで調整でき、パフォーマンスと画質の間のトレードオフを提供します。

コード スニペット

改善されたリサンプリングを示すために、オリジナルのセクションを変更しました。コードが提供されています:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // Adjust kernel lobes as desired
    document.body.appendChild(canvas);
};

制限事項と互換性

にもかかわらずこの JavaScript ベースのリサンプリング手法は優れた画質を提供しますが、計算量が多く、低速のデバイスではパフォーマンスの問題が発生する可能性があります。さらに、Anrieff Gallery Generator から概念を借用しているため、実装が GPL2 ライセンスの対象となるかどうかは不明です。

以上がLanczos リサンプリングは HTML5 キャンバス画像のサイズ変更をどのように改善できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。