品質を落とさずに HTML5 キャンバス上の画像のサイズを変更するにはどうすればよいですか?

HTML5 キャンバスで画像のサイズを変更する方法

JavaScript と HTML5 キャンバスを使用して画像のサイズを変更する場合、画像を縮小すると画質が低下することがよくあります。この問題は、ほとんどのブラウザのデフォルトのサイズ変更アルゴリズムが最近傍補間を使用しており、結果がピクセル化されるために発生します。

より良いサイズ変更品質を実現するには、画像の解像度を維持するランチョス リサンプリングなどのより高度なアルゴリズムを実装できます。

これは、画像の Lanczos リサンプリング アルゴリズムの JavaScript 実装です。キャンバスでのサイズ変更:

function thumbnailer(elem, img, sx, lobes) {
    // ... (code remains the same as in the reference answer)
}

このアルゴリズムを使用すると、優れた品質で画像のサイズを変更し、ピクセル化された外観を回避できます。例:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // You can adjust the lobes parameter for different levels of sharpness
    document.body.appendChild(canvas);
};

このコードを使用すると、ブラウザーは高品質でサイズ変更された画像を生成できるため、ユーザー エクスペリエンスが向上し、ビジュアルの整合性が維持されます。

以上が品質を落とさずに HTML5 キャンバス上の画像のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。