Welchen Algorithmus verwenden Browser normalerweise, wenn sie Bilder mit CSS skalieren?
Ich versuche, canvas zu erhalten, um skalierte Bilder mit derselben visuellen Genauigkeit wie CSS zu rendern.
Laut meinen Tests (in der Chrome-Version 43.0.2357.130) scheint es nicht Lanczos3 zu sein, obwohl meine Tests mit ResampleScope zeigt an, dass es sein sollte.
Siehe hier:
Code, der zum Erzeugen dieser Ergebnisse verwendet wird:
"CSS":
%Vor%"Leinwand drawImage":
%Vor%"Leinwand-Transformation":
%Vor%"bicubic" (Code für bicubic am unteren Rand)
2 Antworten
Hier ist vielleicht ein nützlicher Link zum Thema Firefox:
Daher steuert CSS manchmal den Bildgrößenänderungsprozess, aber meistens nicht.
Nach meinen Tests variiert die Qualität der Bildskalierung stark abhängig vom Status der internen Optimierungen des Browsers. Wenn zum Beispiel in CSS-Transformationen gearbeitet wird, die als "beschleunigt" betrachtet werden, kann die Quellkarte von NxN nur einmal skaliert werden Größe, sagen wir in 200x200 und danach wird dieser Bitpuffer auf eine andere Dimension MxM skaliert, die Qualität verliert, da es zwei Durchgänge gibt und das Ergebnis unscharf sein kann, wenn die erste Puffergröße nicht groß genug ist, was bedeutet, dass Sie nicht bestimmen können Das Ergebnis basiert nur auf der Quellbitmap.
Das heißt, dass die resultierende Bildqualität nicht unbedingt von der ursprünglichen Bildqualität oder -größe abhängt, zumindest wenn GPU-Transformationen verwendet werden.
In anderen Fällen, wenn keine Beschränkungen auf der Grundlage von CSS-Regeln bestehen oder der Browser nicht gehorcht, kann das Bild auf die beste Art und Weise geglättet werden - es könnte das Bild zuerst mit einem einfachen Algorithmus transformieren und falls ja Genug Prozessor Zeit könnte es zweite Filterung Pass auf das Bild anwenden, ist schärfer mit ausgefeilter Algorithmus, wenn es realistisch ist auf der aktuellen GPU / Gerätekonfiguration.
Ich bin mir sicher, dass Sie mit dem Thema vertraut sind, aber hier ist eine Liste von Möglichkeiten, wie Sie ein Bild skalieren können, also gibt es viele Algorithmen zur Auswahl: Ссылка
Um realistischer zu werden, können Sie direkt zum Quellcode von Chrome gehen, Ссылка
%Vor%Der Code enthält eine Aufzählung für mindestens folgende Filter: RESIZE_BOX, RESIZE_HAMMING1, RESIZE_LANCZOS2, RESIZE_LANCZOS3,
Ich nehme an, dass Sie die Implementierungen dieser Filter auch in image_operations.cc finden können Ссылка
Ich habe einen Artikel über die Verwendung der image-rendering CSS-Eigenschaft zur Steuerung des Algorithmus gefunden . In diesem Artikel sagt der Autor:
Wie Sie sehen können, ist der Effekt suboptimal - der Standard des Browsers Skalierungsalgorithmus (normalerweise bilineare Interpolation ) angewendet Anti-Aliasing für das Bild.
(Betonung meiner). Es geht auch darum, die image-rendering CSS-Eigenschaft zu verwenden, um zu steuern, welcher Algorithmus verwendet wird.
Tags und Links javascript css browser