HTML Canvas を使用して画像のサイズを滑らかに変更するにはどうすればよいですか?

キャンバスを使用した画像の平滑化

HTML キャンバスを使用した画像のサイズ変更は一般的なタスクですが、滑らかさを実現するのは難しい場合があります。 Photoshop などの画像編集ソフトウェアは、バイキュービックやバイリニアなどのさまざまな補間アルゴリズムを提供していますが、キャンバスがこれらのオプションをサポートしているかどうかは不明です。

<code class="js">var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 234;
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);</code>

上記のコード スニペットは、キャンバスを使用して画像のサイズを変更しますが、サイズ変更された画像は滑らかさに欠けます。

これに対処するために、ダウンステップの概念を使用できます。通常、ブラウザはサイズ変更に線形補間を使用するため、エイリアシングが発生する可能性があります。ダウンスケーリング プロセスを複数のステップに分割することで、バイキュービック内挿に近い結果を得ることができます。

次の変更されたコードを考えてみましょう:

<code class="js">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";</code>

このコードは複数のサイズ変更ステップを実行します。続けて、画像サイズを徐々に縮小し、補間を適用します。その結果、エッジが滑らかになり、視覚的な品質が向上した画像が得られます。

以上がHTML Canvas を使用して画像のサイズを滑らかに変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。