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

使用 JavaScript Canvas 平滑調整影像大小

使用 canvas 調整影像大小時，通常會遇到平滑度問題。與 Photoshop 等軟體或採用雙三次或雙線性等演算法的瀏覽器不同，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 = "image.jpg";</code>

第一步將影像縮小到原始影像的 50%尺寸。第二步再次縮小中間影像，最終縮小 25%。最後，第三步將影像調整到所需的大小。

透過多次重複縮小過程，您可以有效地近似更平滑的雙三次插值技術。這種方法使畫布能夠以增強的平滑度調整影像大小，接近軟體程式和瀏覽器中看到的品質。

以上是如何使用 JavaScript Canvas 實現平滑的圖像大小調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！