使用 JavaScript Canvas 平滑調整大小的圖像

使用 HTML canvas 調整圖像大小提供了一種在 Web 應用程式中操作視覺效果的便捷方法。然而，預設的調整大小演算法可能會導致影像像素化或鋸齒狀，缺乏影像編輯軟體中的平滑度。這個問題可以透過結合影像平滑技術來解決。

實現平滑的一種方法是逐步縮小尺寸。此方法涉及使用較小的增量逐漸調整影像大小。例如，您可以先將原始影像大小縮小到 75%，然後縮小到 62.5%，以此類推，而不是直接將原始影像大小調整為 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);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

另一種方法是設定 imageSmoothingQuality 屬性，Chrome 等現代瀏覽器都支援此屬性。此屬性控制用於調整影像大小的插值演算法。透過將其設為“high”，瀏覽器可以切換到更高級的雙三次插值方法，從而提高影像平滑度。

canvas.getContext('2d', { imageSmoothingQuality: "high" });

透過逐步縮小尺寸或調整影像平滑質量，開發人員可以使用JavaScript 畫布增強調整大小的圖像的外觀，從而創建具有視覺吸引力的結果。