JavaScript Canvas で画像のサイズ変更をスムーズに行うにはどうすればよいですか?

JavaScript Canvas を使用したスムーズな画像サイズ変更

Canvas を使用して画像のサイズを変更する場合、滑らかさに関する問題がよく発生します。 Photoshop などのソフトウェアや、バイキュービックやバイリニアなどのアルゴリズムを採用するブラウザとは異なり、キャンバスにはスムージング機能が組み込まれていません。

スムーズなサイズ変更を実現するには、ダウンステップを使用できます。通常、ブラウザは画像のサイズ変更中に線形補間を使用しますが、ダウンステップでは双線形補間を使用して、より洗練された結果を生成します。プロセスを複数のステップに分割することで、バイキュービック結果を近似できます。

次のコード スニペットを考えてみましょう:

<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 = "image.jpg";</code>

最初のステップでは、画像が元の 50% に縮小されます。サイズ。 2 番目のステップでは、中間イメージが再度縮小され、最終的には 25% 縮小されます。最後に、3 番目のステップでは、画像を希望のサイズに調整します。

ダウンスケーリング プロセスを複数回繰り返すことで、よりスムーズなバイキュービック補間手法を効率的に近似できます。このアプローチにより、Canvas は、ソフトウェア プログラムやブラウザーで見られる品質に近い滑らかさで画像のサイズを変更できるようになります。

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