使用畫布調整影像大小時如何克服鋸齒狀邊緣和模糊結果？

在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 中的平滑質量，提供更直接的實現平滑的方法，但尚未在所有瀏覽器中支援。

以上是使用畫布調整影像大小時如何克服鋸齒狀邊緣和模糊結果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！