高质量 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;
}

此算法计算每个源像素对一个、两个或四个目标像素的贡献，确保在缩小过程中保留所有细节。

多个缩小步骤的意义

多步缩小可能会导致图像变得更加模糊。这是因为连续降尺度操作的累积舍入误差会导致更大的噪声。

与其他方法的比较

所提供的算法优于其他下采样技术，如示例图像。即使采用多个缩小步骤，它也能在保持清晰度和最小化噪声之间实现平衡。