ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript Canvas を使用して画像のスムーズなサイズ変更を実現するにはどうすればよいですか?

JavaScript Canvas を使用して画像のスムーズなサイズ変更を実現するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-10-22 21:26:29
オリジナル
904 人が閲覧しました

How to Achieve Smooth Resizing of Images Using JavaScript Canvas?

JavaScript キャンバスで画像のサイズをスムーズに変更する

JavaScript キャンバスには画像のサイズを変更する機能がありますが、滑らかさを実現するのは難しい場合があります。この問題に対処する解決策は次のとおりです。

結果をよりスムーズにするためのダウンステップ

ほとんどのブラウザは画像のサイズ変更に線形補間を採用しているため、滑らかさが失われます。より良い結果を達成するには、画像のサイズをより小さな増分で変更するテクニックであるダウンステッピングを使用します。これは、内挿に 4x4 ピクセル グリッドを使用するバイキュービック アルゴリズムに近似します。

実装

次のコードを考えてみましょう:

<code class="js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // Step 1 - Shrink the image to half its size
    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 - Further reduce the image by half
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // Step 3 - Resize the image back to its intended dimensions
    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>
ログイン後にコピー

この段階的なアプローチを実装することで、JavaScript キャンバスを使用してサイズ変更された画像の滑らかさを効果的に向上させることができます。

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

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート