Neues Sampling durch Herunterskalieren verringert die Bildqualität?

Das Ziel hier ist, die Größe eines Bildes zu reduzieren und gleichzeitig seine Qualität in einer Browserumgebung beizubehalten. Das Problem tritt auf, wenn ein Bild mithilfe der HTML5-Leinwand verkleinert wird, was zu einer Bildverschlechterung führt.

Herunterskalierung vs. Interpolation

Herunterskalierung und Interpolation sind unterschiedliche Techniken. Beim Herunterskalieren handelt es sich um die Reduzierung der Bildabmessungen durch die Kombination von Pixeln im Quellbild, um im Zielbild weniger Pixel zu erzeugen, während bei der Interpolation beim Hochskalieren neue Pixel im Zielbild erstellt werden. Im Zusammenhang mit der Herunterskalierung ist die Interpolation irrelevant.

Pixel Perfect Downscaling

Das Problem liegt in der Implementierung der Herunterskalierung durch Browser, die eine einfache Methode verwendet, die ein einzelnes Pixel aus dem Quellbild auswählt stellen jedes Pixel im Zielbild dar. Dies kann zu Detailverlust und Rauschen führen.

Lösung: Pixel-Perfect-Downscaling-Algorithmus

Ein Pixel-Perfect-Downscaling-Algorithmus stellt sicher, dass alle Quellpixel zu einem, zwei oder vier Zielpixeln beitragen. abhängig von der Überlappung der Pixel. Dieser Algorithmus nimmt jedes Quellpixel und berechnet sein Gewicht und das nächste Gewicht innerhalb des Zielpixels und seiner angrenzenden Pixel. Anschließend werden Gewichtungen verwendet, um den Beitrag des Quellpixels zu den Zielpixeln zu berechnen.

Implementierungsdetails

Der bereitgestellte JavaScript-Code bietet einen pixelgenauen Downscaling-Algorithmus. Es erstellt ein float32-Array zum Speichern der Zwischenpixelwerte, das dreimal so groß ist wie das Zielbild. Dies kann bei großen Bildern speicherintensiv sein.

Einschränkungen

Während dieser Algorithmus eine qualitativ hochwertige Herunterskalierung ermöglicht, kann die Verarbeitung großer Bilder aufgrund der Verwendung der Funktionen getImageData und putImageData langsam sein.

Zusätzliche Überlegungen

Bei kleineren Bildern kann das Herunterskalieren mithilfe der integrierten Skalierungsmechanismen von HTML5 Canvas mehrmals durchgeführt werden, da diese für kleine Bilder optimiert sind. Erwägen Sie bei größeren Bildern die Verwendung anderer Methoden wie CSS oder WebGL zum Herunterskalieren.