高品質HTML5 Canvas 圖片大小調整（縮小）

使用HTML5 canvas 在瀏覽器中調整影像大小可能會導致品質較差，尤其是在縮小規模。本文研究了該問題，並提供了在縮小過程中實現最佳品質的解決方案。

停用插值和影像平滑

問題中提供的初始CSS 和JS 程式碼包括用於停用插值和影像平滑的屬性：

image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

但是，這些屬性不會直接影響縮小品質。插值和平滑涉及創建新像素，這與減小圖像尺寸無關。

下採樣與插值

瀏覽器中縮小圖像尺寸的問題是相關的下採樣而不是插值。

在下方取樣中，瀏覽器通常使用簡單的方法，從來源中選擇單一像素目標影像中每個像素的影像。這可能會導致細節和噪音的損失。

像素完美下採樣演算法

要解決這個問題，我們需要一個採用所有來源的像素完美下採樣演算法考慮像素。提供的程式碼片段是此類演算法的範例：

function downScaleCanvas(cv, scale) {
    // Process all pixels in the source image
    for (sy = 0; sy < sh; sy  ) {
        for (sx = 0; sx < sw; sx  ) {
            // Calculate target pixel position and weights
            ...

            // Add weighted contributions to target buffer
            ...
        }
    }

    // Create result canvas and populate it
    ...

    return resCV;
}

此演算法計算每個來源像素對一個、兩個或四個目標像素的貢獻，確保在縮小過程中保留所有細節。

多個縮小步驟的意義

多步驟縮小可能會導致影像變得更加模糊。這是因為連續降尺度操作的累積舍入誤差會導致更大的雜訊。

與其他方法的比較

所提供的演算法優於其他下採樣技術，如範例影像。即使採用多個縮小步驟，它也能在保持清晰度和最小化雜訊之間實現平衡。