Javascript réalise la conversion de la valeur de couleur Web_javascript Compétences

J'ai été occupé à répondre à des besoins professionnels récemment et je n'ai pas blogué depuis longtemps. J'ai eu un peu de temps aujourd'hui et j'ai parcouru certains codes front-end dans des projets récents. Lorsque j'ai vu la fonction de conversion des couleurs Web, il m'est soudainement venu à l'esprit que lorsque nous effectuons certaines exigences de réglage/édition de couleurs, nous impliquons souvent divers formats de valeurs de couleur. .d'échange. J'ai donc décidé d'enregistrer comment j'ai implémenté cette partie de la fonction, de l'écrire et de la partager avec tout le monde. J'espère que les lecteurs pourront exprimer leurs opinions et communiquer davantage.

Regardez d'abord le problème

Question 1. Lorsque nous effectuons du développement web front-end, nous utilisons souvent dom.style.backgroundColor = "#f00" pour définir la couleur d'arrière-plan d'un certain élément DOM. Nous utilisons également similar (pourquoi similaire ? Comparaison de situations. (De plus, vous pouvez utiliser votre imagination librement ici) var bgc = dom.style.backgroundColor code pour obtenir la couleur d'arrière-plan d'un certain élément DOM. Alors voici la question, veuillez regarder l'image ci-dessous :

Si le contraste ici n’est pas assez évident, poursuivons la lecture :

Évidemment, la même valeur de couleur doit être égale, mais le résultat ne l'est pas. Et ce n'est pas un cas isolé. Les résultats obtenus par l'auteur dans les outils de développement Chrome et la console Firefox sont concordants.

Question 2 : Le travail de développement front-end commence souvent par la restauration du brouillon de conception de l'interface utilisateur. Lors du processus de codage, nous trouvons souvent des designs comme celui-ci : un fond de boîte a une couleur unie (disons : #f00), mais avec une opacité de 75 %. Évidemment, dans ce cas, nous ne pouvons pas simplement le définir via dom.style.backgroundColor = "#f00" car l'effet translucide ne peut pas être obtenu. En tournant le sujet, nous savons qu'il existe un élément rgba dans CSS3, ce qui signifie que nous pouvons définir une couleur d'arrière-plan translucide via dom.style.backgroundColor = "rgba(255, 0, 0, 0.75)". Alors, voici à nouveau la question : cette conversion est facile à faire dans Photoshop, mais en Javascript, comment convertir ("#f00", 75) en rgba(255, 0, 0, 0.75) ?

Ensuite, voyons comment j'ai fait.

Convertir la valeur de couleur RVB (a) en couleur hexadécimale (hex)

Ce sont tous des développeurs, on comprend ! Il vaut mieux écrire du code directement qu’autre chose, mais voici le plus original :

Copier le code Le code est le suivant :

var rgbToHex = fonction (rgb) {
var rRgb = /rgb((d{1,3}),(d{1,3}),(d{1,3}))/,
rRgba = /rgba((d{1,3}),(d{1,3}),(d{1,3}),([.d] ))/,
r, g, b, a, rs = rgb.replace(/s /g, "").match(rRgb),
​​​​ rsa = rgb.replace(/s /g, "").match(rRgba);
Si (rs) {
         r = ( rs[1]).toString(16);
r = r.longueur == 1 ? "0" r : r;
g = ( rs[2]).toString(16);
g = g.longueur == 1 ? "0" g : g;
           b = ( rs[3]).toString(16);
b = b.longueur == 1 ? "0" b : b;
           return {hex : "#" r g b, alpha : 100};
} sinon si (rsa) {
r = (rsa[1]).toString(16);
r = r.longueur == 1 ? "0" r : r;
g = (rsa[2]).toString(16);
g = g.longueur == 1 ? "0" g : g;
b = (rsa[3]).toString(16);
b = b.longueur == 1 ? "0" b : b;
une = (rsa[4]) * 100
           return {hex : "#" r g b, alpha : Math.ceil(a)};
} autre {
          return {hex : rgb, alpha : 100};
>
};

Pourquoi est-il considéré comme le plus original ? Parce que lorsque j'ai examiné le code aujourd'hui, j'ai constaté qu'il y avait encore de la place pour l'évolution. Ensuite, comparons le code évolué (optimisé) :

.

Copier le code Le code est le suivant :

var rgbToHex = fonction (rgb) {
          var rRgba = /rgba?((d{1,3}),(d{1,3}),(d{1,3})(,([.d] ))?)/,
         r, g, b, a,
​​​​ rsa = rgb.replace(/s /g, "").match(rRgba);
Si (rsa) {
r = (rsa[1]).toString(16);
r = r.longueur == 1 ? "0" r : r;
g = (rsa[2]).toString(16);
g = g.longueur == 1 ? "0" g : g;
b = (rsa[3]).toString(16);
b = b.longueur == 1 ? "0" b : b;
une = ( (rsa[5] ? rsa[5] : 1)) * 100
           return {hex : "#" r g b, alpha : Math.ceil(a)};
} autre {
          return {hex : rgb, alpha : 100};
>
};

Sans parler de la branche if manquante, c'est évident rien qu'à la quantité de code ! Voyons ensuite si le résultat de la conversion est comme prévu. Pour ce faire, j'ai exécuté les lignes de code suivantes dans la console :

À en juger par les résultats d'exécution, notre méthode semble avoir atteint notre objectif. Cependant, des amis attentifs auraient dû remarquer qu'il y a deux flèches rouges sur l'image. Y a-t-il un piège ici ? bien. Regardons de plus près le paramètre de couleur rgb(255, 0, 0, 2) passé dans la première flèche. En fait, ce n'est pas une valeur de couleur légale. La valeur de couleur au format rgb n'a pas la quatrième (transparence). paramètre ; regardez rgba(255, 0, 0, 1.48) dans la deuxième flèche. Le format ici est OK, mais la transparence est de 1,48, ce qui n'est pas une valeur de transparence légale. Dans les deux cas, notre méthode a été exécutée normalement et renvoyée normalement. Cela montre que notre méthode a encore de la marge pour évoluer, et nous laisserons à chacun le soin de l'utiliser !

Convertir la couleur hexadécimale (hex) au format rgba

Dans le développement quotidien, les valeurs de couleur que nous utilisons le plus couramment doivent être les valeurs de couleur au format hexadécimal (#ff0000, #f00, etc.) Si nous devons convertir les valeurs de couleur au format rgba. lorsque nous les utilisons, que faire ?

Copier le code Le code est le suivant :

var hexToRgba = fonction (hex, al) {
var hexColor = /^#/.test(hex) ? hex.slice(1) : hex,
alp = hex === 'transparent' 0 : Math.ceil(al),
         r, g, b;
hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff';
Si (hexColor.length === 3) {
hexColor = hexColor.replace(/(w)(w)(w)/gi, '$1$1$2$2$3$3');
>
r = hexColor.slice(0, 2);
g = hexColor.slice(2, 4);
b = hexColor.slice(4, 6);
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
Retour {
hex : '#' hexColor,
​​​​alpha : alpage,
rgba: 'rgba('r', 'g', 'b', '(alp/100).toFixed(2) ')'
};
};

De même, nous écrivons également un code de vérification pour tester si notre conversion est normale :

À en juger par les résultats d'exécution, il n'y a aucun problème avec notre méthode et nous pouvons obtenir les résultats de conversion que nous souhaitons. Mais ici, nous nous retrouvons toujours avec deux flèches rouges, une transparence illégale et une valeur de couleur illégale. Cette partie de la fonction évolution est aussi laissée à chacun, haha...

Enfin, la conversion mutuelle entre les valeurs de couleur des pages Web est en fait un problème courant. J'en ai simplement répertorié un ici. Je pense qu'il existe des méthodes plus nombreuses et meilleures qui peuvent être utilisées. Tout le monde est invité à proposer. progresser ensemble~~