Canvas で画像のサイズを変更するときに、ギザギザのエッジやぼやけた結果を解決するにはどうすればよいですか?

JavaScript で Canvas を使用して画像のサイズを変更するときのスムージングの問題を解決する

JavaScript で Canvas を使用して画像のサイズを変更すると、エッジがギザギザになったり、ぼやけたりする場合があります。スムーズなサイズ変更を実現するには、ダウンステップとして知られる手法を使用できます。

ほとんどのブラウザでは、デフォルトで線形補間がサイズ変更に使用されます。より滑らかな結果を生成するバイキュービック補間では、より大きな近傍ピクセルを使用します。ただし、ブラウザは通常、バイキュービック補間を直接実装しません。

ダウンステップ手法では、毎回小さいスケール係数を使用して画像のサイズを繰り返し変更します。これは、基礎となるブラウザで線形補間を利用しながら、バイキュービック補間の動作を模倣します。

次のコード スニペットは、ダウンステッピングを実装する方法を示しています。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

このコードは、一時キャンバス、oc を実行し、画像のサイズを繰り返し変更し、最終的に最終キャンバスに描画します。サイズ変更の各ステップでは線形補間が使用されますが、それらを組み合わせることで、全体的な効果はバイキュービック補間に近似します。

imageSmoothingQuality プロパティを使用して Chrome のスムージング品質を制御することもでき、滑らかさを実現するより直接的な手段を提供します。ただし、まだすべてのブラウザでサポートされているわけではありません。

以上がCanvas で画像のサイズを変更するときに、ギザギザのエッジやぼやけた結果を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。