最適な品質を維持しながら HTML5 キャンバスで画像のサイズを変更するにはどうすればよいですか?

最適な品質を得るために HTML5 キャンバスで画像のサイズを変更する

画像のスケーリングは、特に視覚的な品質を維持することが最も重要な場合には、困難な作業となることがあります。この記事では、HTML5 キャンバス内で画像のサイズを変更するためのさまざまな方法を検討し、最良の結果を達成する方法に焦点を当てます。

現在のアプローチと制限

提供されているコード スニペットは、次のことを示しています。キャンバスを使用して画像のサイズを変更する一般的なアプローチ。ただし、元の投稿者が指摘したように、縮小された画像の品質は低下します。これは、ブラウザが双線形補間を使用することが多く、画像がぼやけたりピクセル化される可能性があるためです。

Lanczos リサンプリング

サイズ変更中の画質を向上させるために、この記事では Lanczos リサンプリングを紹介しています。 。双一次補間とは異なり、Lanczos はガウス フィルターを使用してピクセル間のスムーズな遷移を作成します。回答セクションで提供されているコードは、JavaScript で Lanczos リサンプリング アルゴリズムを実装しています。

実装

元のコード スニペットに Lanczos アルゴリズムを適用すると、画質が大幅に向上します。変更されたコードは、サムネイル クラスを使用して別のキャンバス上の画像を再スケールし、再スケールされたデータを元のキャンバスにコピーして表示します。

使用法:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // Adjust the last parameter for kernel radius
    document.body.appendChild(canvas);
};

Lanczos リサンプリングを使用することにより、コードは著しく鮮明で視覚的に好ましい画像を生成します。この方法は、画質が重要な場合に推奨されます。

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