Python-Implementierung des CSS3-Mischmodus und Diskussion über den Farbraum
Was ist der CSS3-Mischmodus?
Es handelt sich um eine Funktion "Mischmodus (Zeichenmodus)", die in Bildbearbeitungswerkzeugen wie Photoshop installiert ist. Sie ist jedoch auch in CSS3 mit der Eigenschaft "Mischmodus" implementiert. Da es sich um CSS3 handelt, ist es natürlich erforderlich, das Erscheinungsbild in jedem Browser (außer IE) zu vereinheitlichen, sodass die Berechnungsformel für jeden Mischmodus in den W3C-Spezifikationen aufgeführt ist.
Compositing and Blending Japanische Übersetzung zusammensetzen und mischen
Darüber hinaus scheinen auch Adobe-Mitarbeiter an der Formulierung beteiligt zu sein, und es wird anscheinend dieselbe Formel wie im Mischmodus von Adobe-Produkten wie Photoshop verwendet.
Überraschend schwierige "Nicht trennbare Mischung"
Beim Lesen der W3C-Spezifikationen werden die Mischmodi in zwei Typen unterteilt: "Trennbare Mischung" und "Nicht trennbare Mischung". "Nicht trennbare Mischung" ist eine Mischung, die die Kombination aller Farbkomponenten berücksichtigt, ohne jede Komponente einzeln zu behandeln.
"Trennbare Mischung" verwendet einfache Formeln wie "Bildschirm" und "Überlagerung", so dass es kein Problem gibt. Es gibt vier Probleme: "Farbton", "Sättigung", "Farbe" und "Leuchtkraft", die als "nicht trennbare Mischung" klassifiziert werden.
Beispielsweise ist der "Farbton" -Modus ein Modus, in dem der Farbton (Farbton) des Quellbilds angewendet wird, während die Helligkeit des Hintergrundbilds beibehalten wird. Kombinieren wir die beiden folgenden Bilder im Farbtonmodus.
Das Zusammensetzungsergebnis ist wie folgt.
Es ist keine einfache Geschichte: "Da ich den Farbton transplantiere, werde ich ihn in den HSV-Farbraum konvertieren und die H-Komponente transplantieren ...". Die Luminanz des Originalbilds muss beim Portieren des Farbtons beibehalten werden. Dies bedeutet, dass das zusammengesetzte Ergebnis wie folgt monochrom sein muss.
<iclass="fafa-arrow-right"aria-hidden="true">
Ahiru ist vollständig verschwunden.
Die Geschichte von Wert, Leichtigkeit und Luminanz
Es gibt zwei häufig verwendete Farbräume, die Farbtöne verarbeiten: den HSV-Farbraum und den HSL-Farbraum. Der HSV-Farbraum besteht aus Farbton, Sättigung und Wert.
Der HSL-Farbraum besteht aus drei Teilen: Farbton, Sättigung und Helligkeit.
In Wikipedia wird es im HSL-Farbraum als Helligkeit beschrieben, dies unterscheidet sich jedoch von der Luminanz. Beachten Sie, dass das Wort Verwirrung hier auf verschiedenen Seiten zu finden ist.
Die allgemeine Formel für die Konvertierung von RGB in Luminanz lautet:
r * 0.298912 + g * 0.586611 + b * 0.114478
Die Umrechnungsformel für HSL in L (Helligkeit) lautet wie folgt.
(MAX(r, g, b) - MIN(r, g, b)) / 2
Klar ist es ganz anders. Die Übersetzung von Helligkeit variiert je nach Material wie "Helligkeit" und "Helligkeit", daher ist es wichtig, nicht verwechselt zu werden.
Über die Interpretation von SetSat
Eine Pseudocode-Funktion namens "SetSat" ist in der W3C-Formel beschrieben.
SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
Als ich diesen Pseudocode zum ersten Mal sah, verstand ich nicht, was er bedeutete. "Cmin" ist der Minimalwert in der RGB-Komponente, "Cmax" ist der Maximalwert und "Cmid" ist der Medianwert.
Wenn beispielsweise C = RGB (0,8, 0,6, 0,3) ist, ist "Cmin" das B-Element (0,3), "Cmax" das R-Element (0,8) und "Cmid" das G-Element (0,6). Ich werde. Die Berechnungsformel lautet wie folgt.
G = (((G - B) x s) / (R - B))
R = s
B = 0.0
Es bedeutet das. Ich schreibe übrigens nicht, was passiert, wenn es zwei "Cmin" und "Cmax" wie RGB (0,1, 0,1, 0,5) und RGB (0,5, 0,5, 0,1) gibt. Ich weiß nicht, wie die richtige Antwort lauten wird, aber es scheint, dass jeder Wert ausreicht, solange die folgenden Bedingungen erfüllt sind.
max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue) == s
Implementierung in Python (Kissen)
Nachdem wir die Formel kennen, werden wir sie in der Python-Bildbibliothek pillow implementieren. Pillow ist im Wesentlichen eine Python-Standardbildbibliothek. Es verfügt nicht über erweiterte Funktionen wie OpenCV, kann jedoch Daten in verschiedene Bibliotheken konvertieren und bietet eine kompakte und schnelle Bildverarbeitung.
Wie in PIL / Pillow Cheet Sheet beschrieben, verwendet die Implementierung des Mischmodus das Modul "ImageMath".
Lassen Sie uns als Beispiel "Hard-Light" implementieren.
from PIL import ImageMath
def _hard_light(a, b):
_cl = 2 * a * b / 255
_ch = 2.0 * (a + b - a * b / 255.0) - 255.0
return _cl * (b < 128) + _ch * (b >= 128)
bands = []
for cb, cs in zip(backdrop.split(), source.split()):
t = ImageMath.eval(
"func(float(a), float(b))",
func=_hard_light,
a=cb, b=cs
).convert("L")
bands += [t]
Image.merge("RGB", bands)
Das Modul "ImageMath" ist nützlich, da Sie damit Elemente wie Zahlen berechnen können. Für eine einfache Verarbeitung wie "Trennbare Mischung" können Sie dies folgendermaßen implementieren.
Das Problem ist die "nicht trennbare Mischung", die aufgrund des unerwartet großen Rechenaufwands und der schwierigen Verarbeitung recht schwierig ist.
In Bezug auf die Implementierung werden wir den Code später veröffentlichen. Wenn Sie interessiert sind, werden wir ihn implementieren, indem wir die privaten Funktionen des ImageMath-Moduls vollständig nutzen.
Wenn Sie in einer anderen Sprache portieren möchten, werden Sie wahrscheinlich GLSL usw. verwenden. Ich hoffe, dass dies hilfreich ist.
Modul "Image4Layer"
Wir haben diese Prozesse unter dem Modulnamen "Image4Layer" zusammengefasst. In Bildverarbeitungssystemen verwende ich häufig "Overlay" -Kompositionen, daher denke ich, dass einige Dinge zu verwenden sind.
https://github.com/pashango2/Image4Layer
Die Installation ist einfach mit Pip, Kissen (PIL) muss vorinstalliert sein, um zu laufen.
$pip install image4layer
Es ist einfach zu bedienen und ein Beispiel für das Zusammensetzen im Farbausweichmodus.
from PIL import Image
from image4layer import Image4Layer
source = Image.open("ducky.png ")
backdrop = Image.open("backdrop.png ")
Image4Layer.color_dodge(backdrop, source)
Es ist einfach, unten finden Sie eine Liste der unterstützten Mischmodi.
| Mischmodus | Bild |
|---|---|
| Image4Layer.normal |  |
| Image4Layer.multiply |  |
| Image4Layer.screen |  |
| Image4Layer.overlay |  |
| Image4Layer.darken |  |
| Image4Layer.lighten |  |
| Image4Layer.color_dodge | |
| Image4Layer.color_burn |  |
| Image4Layer.hard_light |  |
| Image4Layer.soft_light |  |
| Image4Layer.difference |  |
| Image4Layer.exclusion |  |
| Image4Layer.hue | |
| Image4Layer.saturation |  |
| Image4Layer.color |  |
| Image4Layer.luminosity |  |
Obwohl es nicht in CSS3 enthalten ist, habe ich auch den in Photoshop enthaltenen Mischmodus implementiert.
| Mischmodus | Bild |
|---|---|
| Image4Layer.vivid_light |  |
| Image4Layer.pin_light |  |
| Image4Layer.linear_dodge |  |
| Image4Layer.subtract |  |
Da es sich bei der Lizenz um MIT handelt, kann sie unabhängig vom kommerziellen oder persönlichen Gebrauch kostenlos verwendet werden.
Nachtrag
Version 0.4 funktionierte nicht mit Python 2 und es gab einen Fehler in der Operation zwischen RGBA, der in 0.43 behoben wurde.
Nachwort
Compositing and Blending Japanese Translation enthält die erwartete Zeichnung und die tatsächliche Browseranzeige, aber wenn ich mit Chrome darauf zugreife Es wird wie folgt sein.
Das···? Ist die Farbe nicht ganz anders? Es scheint, dass sich die Farben der Anzeige hier je nach Browser erheblich unterscheiden.
Nachtrag
Die Farbe scheint je nach Chrome-Version unterschiedlich zu sein. Meine Umgebung ist eine Ubuntu-Umgebung, und es scheint, dass die Zusammensetzung des in backdrop.png festgelegten Alpha-Werts fehlerhaft ist.
Übrigens ist das Anzeigeergebnis von Image4Lyaer fast das gleiche wie das Ergebnis von Chrome. Ich denke, dass es fast die gleiche Implementierung hat. Wenn es irgendwelche Informationen gibt, werde ich sie nach Bedarf schreiben.