Cambiar el tamaño de la imagen del lienzo HTML5 (reducir escala) con alta calidad

Cambiar el tamaño de las imágenes en el navegador usando el lienzo HTML5 puede dar como resultado una calidad deficiente, especialmente cuando reducción de escala. Este artículo investiga el problema y proporciona una solución para lograr una calidad óptima durante la reducción de escala.

Deshabilitar la interpolación y el suavizado de imágenes

El código CSS y JS inicial proporcionado en la pregunta incluida propiedades para deshabilitar la interpolación y el suavizado de imágenes:

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

Sin embargo, estas propiedades no afectan directamente la calidad de la reducción de escala. La interpolación y el suavizado se ocupan de la creación de nuevos píxeles, lo cual no es relevante al reducir el tamaño de la imagen.

Reducción de resolución versus interpolación

El problema con la reducción de escala de imágenes en los navegadores está relacionado a la reducción de resolución en lugar de a la interpolación.

En la reducción de resolución, los navegadores suelen utilizar un método sencillo en el que seleccionan un único píxel de la imagen de origen para cada píxel de la imagen de destino. Esto puede provocar pérdida de detalles y ruido.

Algoritmo de reducción de resolución de píxeles perfectos

Para resolver este problema, necesitamos un algoritmo de reducción de resolución de píxeles perfectos que tome todas las fuentes píxeles en cuenta. El fragmento de código proporcionado es un ejemplo de dicho algoritmo:

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;
}

Este algoritmo calcula la contribución de cada píxel de origen a uno, dos o cuatro píxeles de destino, asegurando que todos los detalles se conserven durante la reducción de escala.

Importancia de múltiples pasos de reducción de escala

La reducción de escala en varios pasos puede provocar una mayor borrosidad en la imagen. Esto se debe a que los errores de redondeo acumulativos de las sucesivas operaciones de reducción de escala generan mayor ruido.

Comparación con otros enfoques

El algoritmo proporcionado supera a otras técnicas de reducción de resolución, como se demuestra en el imágenes de ejemplo. Logra un equilibrio entre conservar la nitidez y minimizar el ruido, incluso con múltiples pasos de reducción de escala.