高度なリサンプリング技術を使用して、HTML5 キャンバスで高品質の画像ダウンスケーリングを実現するにはどうすればよいですか?

HTML5 キャンバスでの画像のサイズ変更: 高度なリサンプリング技術の探索

さまざまな画像操作オプションが利用できるにもかかわらず、HTML5 キャンバスで画像のサイズを縮小すると、望ましくない結果が生じる場合があります。結果。特に、バイキュービック サンプリングなどの高度なリサンプリング技術がサポートされていないため、画像がピクセル化されて鮮明さが欠けているように見える可能性があります。

Lanczos リサンプリングの実装

この問題に対処するには、1 つのアプローチとして、 JavaScript 内のカスタム リサンプリング アルゴリズム。ランチョス リサンプリングは、周囲のピクセルの加重平均を適用することにより、高品質のアップスケールまたはダウンスケール イメージを生成する一般的に使用される手法です。

カスタム リサンプリング関数の作成

次のコード スニペットは、カスタム Lanczos リサンプリング関数:

function lanczosCreate(lobes) {
    return function(x) {
        if (x > lobes)
            return 0;
        x *= Math.PI;
        if (Math.abs(x) < 1e-16)
            return 1;
        var xx = x / lobes;
        return Math.sin(x) * Math.sin(xx) / x / xx;
    };
}

この関数は、指定された x 値の Lanczos 重み。

サムネイラー クラスの実装

リサンプリング プロセスをカプセル化するために、次のサムネイラー クラスが導入されます。

function thumbnailer(elem, img, sx, lobes) {
    this.canvas = elem;
    ...

    this.lanczos = lanczosCreate(lobes);
    this.ratio = img.width / sx;
    this.rcp_ratio = 2 / this.ratio;
    ...
}

このクラスは、 Canvas 要素、画像、スケーリングされた幅、およびランチョス ローブの数をパラメータとして指定します。リサンプリング プロセスを処理し、結果のイメージをキャンバスに描画します。

リサンプリングのプロセス 1 とプロセス 2

サムネラー クラスは、リサンプリングを実行するための 2 つのプロセスを実装します。

• 処理 1: この処理は周囲の加重平均を計算します。宛先イメージの各ピクセルに対応するピクセル。
• プロセス 2: このプロセスでは、データを中間バッファーからキャンバスに転送することで、最終的なスケーリングされたイメージを作成します。

結論

JavaScript でカスタム Lanczos リサンプリング アルゴリズムを実装することで、 HTML5キャンバス。これにより、さまざまなブラウザが提供するデフォルトのリサンプリング手法を使用した場合に生じるピクセル化された外観が解消されます。

この記事で提供されるコードは、Lanczos リサンプリング手法を利用するカスタム サムネイルを作成する方法を示し、鮮明な画像を生成できるようにします。 Web アプリケーションで詳細な縮小画像を表示できます。

以上が高度なリサンプリング技術を使用して、HTML5 キャンバスで高品質の画像ダウンスケーリングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。