如何在不損失品質的情況下調整 HTML5 Canvas 上的圖片大小？

如何在 HTML5 畫布中調整圖片大小

使用 JavaScript 和 HTML5 畫布調整圖片大小時，縮小影像時通常會遇到影像品質不佳的情況。出現此問題的原因是大多數瀏覽器中的預設調整大小演算法使用最近鄰插值，從而導致像素化結果。

為了獲得更好的調整大小質量，您可以實現更高級的演算法，例如 Lanczos 重採樣，它保留影像的清晰度和平滑度。

這是 Lanczos 重採樣演算法的 JavaScript 實現，用於在canvas:

function thumbnailer(elem, img, sx, lobes) {
    // ... (code remains the same as in the reference answer)
}

使用此演算法，您可以以優異的品質調整影像大小並避免出現像素化外觀。例如：

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // You can adjust the lobes parameter for different levels of sharpness
    document.body.appendChild(canvas);
};

透過使用此程式碼，瀏覽器可以產生高品質的調整大小影像，確保更好的使用者體驗並保持視覺效果的完整性。

以上是如何在不損失品質的情況下調整 HTML5 Canvas 上的圖片大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！