Изменение размера изображения холста HTML5 (уменьшение масштаба) с высоким качеством

Изменение размера изображений в браузере с использованием холста HTML5 может привести к ухудшению качества, особенно если уменьшение масштаба. В этой статье рассматривается проблема и предлагается решение для достижения оптимального качества при уменьшении масштаба.

Отключение интерполяции и сглаживания изображения

Исходный код 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;
}

Этот алгоритм вычисляет вклад каждого исходного пикселя в один, два или четыре целевых пикселя, гарантируя, что все детали сохраняются во время уменьшения масштаба.

Значимость нескольких шагов уменьшения масштаба

Уменьшение масштаба в несколько этапов может привести к увеличению нечеткости изображения. Это связано с тем, что совокупные ошибки округления в результате последовательных операций уменьшения масштаба приводят к большему шуму. примеры изображений. Он обеспечивает баланс между сохранением резкости и минимизацией шума даже при многократном уменьшении масштаба.