如何使用 HTML Canvas 實現平滑調整大小的圖片？

使用 Canvas 平滑圖片

使用 HTML canvas 調整圖片大小是一項常見任務，但要平滑化可能是一項挑戰。雖然 Photoshop 等影像編輯軟體提供了各種插值演算法，例如雙三次和雙線性，但尚不清楚 canvas 是否支援這些選項。

<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>

上面的程式碼片段使用 canvas 調整影像大小，但調整後的影像缺乏平滑度。

為了解決這個問題，可以採用降步的概念。瀏覽器通常使用線性插值來調整大小，這可能會導致鋸齒。透過將縮小過程分解為多個步驟，可以獲得更接近雙三次插值的結果。

考慮以下修改後的程式碼：

<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中文網其他相關文章！