HTML5-Canvas-Bildgröße ändern (herunterskalieren) mit hoher Qualität

Das Ändern der Bildgröße im Browser mithilfe von HTML5-Canvas kann zu schlechter Qualität führen, insbesondere wenn Verkleinerung. Dieser Artikel untersucht das Problem und bietet eine Lösung zum Erreichen einer optimalen Qualität beim Herunterskalieren.

Interpolation und Bildglättung deaktivieren

Der in der Frage bereitgestellte ursprüngliche CSS- und JS-Code ist enthalten Eigenschaften zum Deaktivieren der Interpolation und Bildglättung:

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

Diese Eigenschaften haben jedoch keinen direkten Einfluss auf die Herunterskalierungsqualität. Bei Interpolation und Glättung geht es um die Erstellung neuer Pixel, was bei der Reduzierung der Bildgröße nicht relevant ist.

Downsampling vs. Interpolation

Das Problem beim Herunterskalieren von Bildern in Browsern hängt damit zusammen auf Downsampling statt auf Interpolation.

Beim Downsampling verwenden Browser normalerweise eine einfache Methode, bei der sie für jedes Pixel im Zielbild ein einzelnes Pixel aus dem Quellbild auswählen. Dies kann zu Detailverlust und Rauschen führen.

Pixel-perfekter Downsampling-Algorithmus

Um dieses Problem zu lösen, benötigen wir einen pixelgenauen Downsampling-Algorithmus, der alle Quellen übernimmt Pixel berücksichtigt. Das bereitgestellte Code-Snippet ist ein Beispiel für einen solchen Algorithmus:

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

Dieser Algorithmus berechnet den Beitrag jedes Quellpixels zu einem, zwei oder vier Zielpixeln und stellt so sicher, dass alle Details beim Herunterskalieren erhalten bleiben.

Bedeutung mehrerer Herunterskalierungsschritte

Eine Verkleinerung in mehreren Schritten kann zu einer erhöhten Unschärfe im Bild führen. Dies liegt daran, dass die kumulativen Rundungsfehler aus aufeinanderfolgenden Downscaling-Vorgängen zu größerem Rauschen führen.

Vergleich mit anderen Ansätzen

Der bereitgestellte Algorithmus übertrifft andere Downsampling-Techniken, wie im gezeigt Beispielbilder. Es erreicht ein Gleichgewicht zwischen der Beibehaltung der Schärfe und der Minimierung von Rauschen, selbst bei mehreren Verkleinerungsschritten.