Redimensionnement d'image de canevas HTML5 (réduction) avec une haute qualité

Le redimensionnement d'images dans le navigateur à l'aide d'un canevas HTML5 peut entraîner une mauvaise qualité, en particulier lorsque réduction d'échelle. Cet article étudie le problème et propose une solution pour obtenir une qualité optimale lors de la réduction d'échelle.

Désactivation de l'interpolation et du lissage de l'image

Le code CSS et JS initial fourni dans la question inclus propriétés de désactivation de l'interpolation et du lissage de l'image :

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

Cependant, ces propriétés n'ont pas d'impact direct sur la qualité de la mise à l'échelle. L'interpolation et le lissage concernent la création de nouveaux pixels, ce qui n'est pas pertinent lors de la réduction de la taille de l'image.

Sous-échantillonnage par rapport à l'interpolation

Le problème de réduction d'échelle des images dans les navigateurs est lié au sous-échantillonnage plutôt qu'à l'interpolation.

Dans le sous-échantillonnage, les navigateurs utilisent généralement une méthode simple dans laquelle ils sélectionnent un seul pixel de l'image source pour chaque pixel. dans l'image de destination. Cela peut entraîner une perte de détails et de bruit.

Algorithme de sous-échantillonnage au pixel près

Pour résoudre ce problème, nous avons besoin d'un algorithme de sous-échantillonnage au pixel près qui prend toutes les sources. en compte les pixels. L'extrait de code fourni est un exemple d'un tel algorithme :

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

Cet algorithme calcule la contribution de chaque pixel source à un, deux ou quatre pixels de destination, garantissant que tous les détails sont préservés pendant la réduction d'échelle.

Importance de plusieurs étapes de réduction d'échelle

La réduction d'échelle en plusieurs étapes peut entraîner un flou accru dans l'image. En effet, les erreurs d'arrondi cumulées résultant des opérations de réduction d'échelle successives entraînent un bruit plus important.

Comparaison avec d'autres approches

L'algorithme fourni surpasse les autres techniques de sous-échantillonnage, comme le démontre le exemples d'images. Il atteint un équilibre entre la conservation de la netteté et la minimisation du bruit, même avec plusieurs étapes de réduction d'échelle.