解決在JavaScript 中使用Canvas 調整影像大小時的平滑問題

在JavaScript 中使用Canvas 調整影像大小有時會導致明顯的鋸齒狀邊緣或模糊。為了實現平滑的調整大小，可以採用一種稱為向下步進的技術。

在大多數瀏覽器中，預設使用線性內插法來調整大小。雙三次插值可產生更平滑的結果，涉及使用更大的像素鄰域。然而，瀏覽器通常不會直接實現雙三次插值。

向下步進法涉及重複調整影像大小，每次使用較小的比例因子。這模仿了雙三次插值的行為，同時仍然在底層瀏覽器中使用線性插值。

以下程式碼片段示範如何實作向下步進：

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

此程式碼建立一個臨時畫布 oc，並迭代調整圖像大小，最終將其繪製到最終畫布上。每個調整大小步驟都使用線性插值，但透過將它們組合起來，整體效果近似於雙三次插值。

imageSmoothingQuality 屬性也可用於控制 Chrome 中的平滑質量，提供更直接的實現平滑的方法，但尚未在所有瀏覽器中支援。