Implémentation Python du mode de fusion CSS3 et discussion sur l'espace colorimétrique
Qu'est-ce que le mode de fusion CSS3?
Il s'agit d'une fonction de "mode de fusion (mode de dessin)" installée dans les outils d'édition d'image tels que Photoshop, mais elle est également implémentée en CSS3 avec une propriété appelée "mix-blend-mode". Puisqu'il s'agit de CSS3, il est naturellement nécessaire d'unifier l'apparence dans chaque navigateur (autre que IE), de sorte que la formule de calcul pour chaque mode de fusion est répertoriée dans les spécifications du W3C.
Compositing and Blending Compositing and Blending Japanese translation
De plus, il semble que les employés d'Adobe soient également impliqués dans la formulation, et il semble que la même formule que le mode de fusion des produits Adobe tels que Photoshop soit utilisée.
"Mélange non séparable" étonnamment difficile
Lors de la lecture des spécifications W3C, les modes de fusion sont classés en deux types: "Mélange séparable" et "Mélange non séparable". «Mélange non séparable» est un mélange qui considère la combinaison de tous les composants de couleur sans traiter chaque composant individuellement.
"Separable blend" utilise des formules simples telles que "screen" et "overlay", donc il n'y a pas de problème. Il y a quatre problèmes: «teinte», «saturation», «couleur» et «luminosité», qui sont classés comme «mélange non séparable».
Par exemple, le mode «teinte» est un mode dans lequel la teinte (teinte) de l'image source est appliquée tout en maintenant la luminosité de l'image d'arrière-plan.
Combinons les deux images ci-dessous en mode hue.
Le résultat de la composition est le suivant.
Ce n'est pas une histoire simple, "Parce que je transplante la teinte, je la convertis en espace colorimétrique HSV et transplante le composant H ...". La luminance de l'image d'origine doit être conservée lors du portage de la teinte, ce qui signifie que le résultat composite doit être monochrome comme suit.
<iclass="fafa-arrow-right"aria-hidden="true">
Ahiru a complètement disparu.
L'histoire de la valeur, de la légèreté et de la luminance
Il existe deux espaces colorimétriques couramment utilisés qui gèrent les teintes: l'espace colorimétrique HSV et l'espace colorimétrique HSL. L'espace colorimétrique HSV se compose de trois parties: Teinte, Saturation et Valeur.
Espace colorimétrique HSV-Wikipédia
L'espace colorimétrique TSL est composé de trois parties: teinte, saturation et clarté.
Dans Wikipedia, il est décrit comme la luminosité dans l'espace colorimétrique HSL, mais cela est différent de la luminance. Sachez que le mot confusion se trouve ici sur différentes pages.
La formule générale pour la conversion de RVB en luminance est:
r * 0.298912 + g * 0.586611 + b * 0.114478
La formule de conversion de HSL en L (clarté) est la suivante.
(MAX(r, g, b) - MIN(r, g, b)) / 2
Clairement, c'est complètement différent. La traduction de la légèreté varie en fonction du matériau tel que "luminosité" et "luminosité", il est donc important de ne pas être confondu.
À propos de l'interprétation de SetSat
Une fonction pseudo-code appelée «SetSat» est décrite dans la formule du W3C.
SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
Quand j'ai vu ce pseudo-code pour la première fois, je n'ai pas compris ce que cela signifiait. «Cmin» est la valeur minimale du composant RVB, «Cmax» est la valeur maximale et «Cmid» est la valeur médiane.
Par exemple, si C = RVB (0,8, 0,6, 0,3), «Cmin» est l'élément B (0,3), «Cmax» est l'élément R (0,8) et «Cmid» est l'élément G (0,6). Je vais. La formule de calcul est la suivante.
G = (((G - B) x s) / (R - B))
R = s
B = 0.0
Cela signifie que.
Au fait, je n'ai pas écrit ce qui se passe quand il y a deux Cmin et Cmax comme RVB (0,1, 0,1, 0,5) et RVB (0,5, 0,5, 0,1).
Je ne sais pas quelle sera la bonne réponse, mais il semble que toute valeur fera l'affaire tant que les conditions suivantes sont remplies.
max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue) == s
Implémentation en Python (oreiller)
Maintenant que nous connaissons la formule, nous allons l'implémenter dans la bibliothèque d'images Python oreiller. oreiller est essentiellement une bibliothèque d'images standard Python. Il n'a pas de fonctions avancées comme OpenCV, mais il peut convertir des données en diverses bibliothèques et dispose d'un traitement d'image compact et à grande vitesse.
Comme décrit dans PIL / Pillow Cheet Sheet, l'implémentation du mode de fusion utilise le module ʻImageMath`.
Implémentons hard-light comme exemple.
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)
Le module ʻImageMath` est utile car il vous permet de calculer des éléments comme des nombres. Pour un traitement simple tel que "Mélange séparable", vous pouvez l'implémenter comme ceci.
Le problème est le "mélange non séparable", qui est assez difficile en raison de la quantité étonnamment importante de calcul et du traitement délicat. En ce qui concerne l'implémentation, je publierai le code plus tard, donc si vous êtes intéressé, j'utiliserai pleinement les fonctions privées du module ʻImageMath`. Si vous voulez porter dans une autre langue, je pense que vous utiliserez GLSL etc., j'espère que cela vous sera utile.
Module "Image4Layer"
Nous avons regroupé ces processus sous le nom de module "Image4Layer". J'utilise souvent la composition «overlay» dans les systèmes de traitement d'image, donc je pense qu'il y a pas mal de choses à utiliser.
https://github.com/pashango2/Image4Layer
L'installation est facile avec pip, l'oreiller (PIL) doit être pré-installé pour fonctionner.
$pip install image4layer
C'est facile à utiliser, c'est un exemple de composition en mode couleur-esquive.
from PIL import Image
from image4layer import Image4Layer
source = Image.open("ducky.png ")
backdrop = Image.open("backdrop.png ")
Image4Layer.color_dodge(backdrop, source)
C'est simple, vous trouverez ci-dessous une liste des modes de fusion pris en charge.
| Mode de fusion | image |
|---|---|
| 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 |  |
Bien que ce ne soit pas dans CSS3, j'ai également implémenté le mode de fusion inclus dans Photoshop.
| Mode de fusion | image |
|---|---|
| Image4Layer.vivid_light |  |
| Image4Layer.pin_light |  |
| Image4Layer.linear_dodge |  |
| Image4Layer.subtract |  |
La licence étant MIT, elle peut être utilisée gratuitement indépendamment de l'usage commercial ou personnel.
Postscript
La version 0.4 ne fonctionnait pas avec Python 2 et il y avait un bogue dans l'opération entre RGBA, qui a été corrigé dans 0.43.
Épilogue
Traduction japonaise de composition et de fusion a le dessin attendu et l'affichage réel du navigateur, mais lorsque j'y accède avec Chrome Ce sera comme suit.
cette···? La couleur n'est-elle pas assez différente? Il semble que les couleurs de l'écran ici diffèrent considérablement selon chaque navigateur.
Postscript
La couleur semble être différente selon la version de Chrome, mon environnement est l'environnement Ubuntu, et il semble qu'il y ait un bug dans la composition de la valeur alpha définie dans backdrop.png.
Au fait, le résultat d'affichage d'Image4Lyaer est presque le même que celui de Chrome, je pense qu'il a presque la même implémentation. S'il y a des informations, je les écrirai au besoin.
Recommended Posts