He estado ocupado completando las necesidades comerciales recientemente y no he escrito un blog durante mucho tiempo. Hoy tengo un poco de tiempo y miré algunos de los códigos frontales en proyectos recientes. Cuando vi la función de conversión de color web, de repente pensé que cuando estábamos haciendo algunos requisitos de configuración de color/edición, a menudo involucraba el intercambio de varios formatos de valor de color. Así que decidí registrar cómo implementé esta parte de la función, escribirla y compartirla con usted, y espero que los lectores expresen sus opiniones y se comuniquen más.
Mira el problema primero
Pregunta 1. Cuando estamos desarrollando la página web front-end, a menudo usamos dom.style.backgroundcolor = "#f00" para establecer el color de fondo de un elemento DOM. También usaremos el código similar (¿por qué es el mismo? Hay muchos casos, por lo que podemos usar libremente nuestra imaginación aquí) var bgc = dom.style.backgroundcolor para obtener el color de fondo de un elemento DOM. Entonces la pregunta es, vea la imagen a continuación:
Si la comparación aquí no es lo suficientemente obvia, sigamos mirando:
Obviamente, el mismo valor de color debe ser igual, pero el resultado no lo es. Este no es un caso aislado. Los resultados que obtengo en las herramientas de desarrollo de Chrome y la consola Firefox son los mismos.
Pregunta 2: El desarrollo front-end a menudo comienza con la restauración del borrador de diseño de la interfaz de usuario. Durante el proceso de codificación, a menudo encontramos dicho diseño: un color sólido de fondo de caja (suponiendo: #F00), pero con 75% de opacidad. Obviamente, no podemos simplemente establecer esta situación a través de dom.style.backgroundcolor = "#F00" porque el efecto translúcido no se puede lograr. A medida que damos la vuelta, sabemos que hay una cosa de RGBA en CSS3, lo que significa que podemos establecer un color de fondo translúcido a través de Dom.Style.BackgroundColor = "RGBA (255, 0, 0, 0.75)" de esta manera. Entonces, la pregunta es nuevamente: esta conversión es fácil de hacer en Photoshop, pero si estamos en JavaScript, ¿cómo debemos convertir ("#F00", 75) a RGBA (255, 0, 0, 0.75)?
A continuación, veamos cómo lo hago.
RGB (a) Valor de color convertido en color hexadecimal (hex)
¡Todos son para el desarrollo, entendemos! Es mejor cargar el código directamente, pero aquí hay una pieza de la original:
<!-lang: js->
La copia del código es la siguiente:
var rgbtohex = function (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,
rrgba = /rgba/((/d{1,3'),(/d] =1,3'),(/d /1,3}),(acar
r, g, b, a, rs = rgb.replace (// s+/g, "") .match (rrgb),
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rs) {
r = (+rs [1]). toString (16);
r = r.length == 1? "0" + r: r;
g = (+rs [2]). toString (16);
g = g.length == 1? "0" + G: G;
b = (+rs [3]). toString (16);
B = B.Length == 1? "0" + B: B;
return {hex: "#" + r + g + b, alfa: 100};
} else if (rsa) {
r = (+rsa [1]). toString (16);
r = r.length == 1? "0" + r: r;
g = (+RSA [2]). Tostring (16);
g = g.length == 1? "0" + G: G;
b = (+RSA [3]). Tostring (16);
B = B.Length == 1? "0" + B: B;
a = (+rsa [4]) * 100
return {hex: "#" + r + g + b, alfa: math.ceil (a)};
} demás {
return {hex: rgb, alfa: 100};
}
};
¿Por qué es el más primitivo? Porque cuando reviso el código hoy, descubrí que todavía hay espacio para la evolución aquí. Comparemos el código evolucionado (optimizado):
<!-lang: js->
La copia del código es la siguiente:
var rgbtohex = function (rgb) {
var rrgba = /rgba?/((/d /1,3'),(/d /1,3'),(/d /1,3})(,(acar
R, G, B, A
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rsa) {
r = (+rsa [1]). toString (16);
r = r.length == 1? "0" + r: r;
g = (+RSA [2]). Tostring (16);
g = g.length == 1? "0" + G: G;
b = (+RSA [3]). Tostring (16);
B = B.Length == 1? "0" + B: B;
a = (+(RSA [5]? RSA [5]: 1)) * 100
return {hex: "#" + r + g + b, alfa: math.ceil (a)};
} demás {
return {hex: rgb, alfa: 100};
}
};
Sin mencionar que falta una rama si es obvio desde la perspectiva del volumen del código solo! A continuación, veamos si el resultado de conversión es como deseamos, y para esto ejecuté algunas líneas de código que se muestran en la siguiente figura en la consola:
A juzgar por los resultados de la ejecución, nuestro método parece haber logrado nuestro objetivo. Sin embargo, los amigos cuidadosos deben notar que hay dos flechas rojas en la imagen. ¿Hay alguna trampa aquí? bien. Echemos un vistazo más de cerca al parámetro de color RGB (255, 0, 0, 2) pasó en la primera flecha. De hecho, este no es un valor de color legal. El valor de color en el formato RGB no tiene el cuarto parámetro (transparencia); Luego mire la segunda flecha RGBA (255, 0, 0, 1.48) en la segunda flecha. No hay problema con el formato aquí, pero la transparencia es 1.48, que en realidad no es un valor de transparencia legal. Nuestro método ha sido ejecutado normalmente y devuelto normalmente, lo que indica que nuestro método todavía tiene espacio para una evolución adicional, por lo que dejaremos que todos realicen.
Convertir el color hexadecimal (hex) al formato RGBA
En el desarrollo diario, el valor de color que usamos con mayor frecuencia debe ser el valor de color en formato hexadecimal ( #FF0000, #F00, etc.). Si necesitamos convertirlo en formato RGBA al usar valores de color, ¿qué debemos hacer?
<!-lang: js->
La copia del código es la siguiente:
var hextorgba = function (hex, al) {
var hexcolor = /^#/.test(hex)? hex.lice (1): hex,
alp = hex === 'transparente'? 0: Math.ceil (AL),
R, G, B;
hexcolor = /^fic0-9a-ffont> =3hmhyb. hexcolor: 'ffffff';
if (hexcolor.length === 3) {
hexcolor = hexcolor.replace (/(/w) (/w) (/w)/gi, '$ 1 $ 1 $ 2 $ 2 $ 3 $ 3');
}
r = hexcolor.slice (0, 2);
g = hexcolor.lice (2, 4);
b = hexcolor.lice (4, 6);
r = parseint (r, 16);
g = parseint (g, 16);
b = parseint (b, 16);
devolver {
hex: '#' + hexcolor,
alfa: ALP,
rgba: 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixed (2) + ')'
};
};
Del mismo modo, también escribimos un código de verificación para probar si nuestra conversión es normal:
A juzgar por los resultados de la ejecución, nuestro método no tiene ningún problema y puede obtener los resultados de conversión que queremos. Pero aquí todavía dejamos dos flechas rojas, transparencia ilegal y valores de color ilegal. Esta parte de la función evolutiva también se deja para todos, jaja ...
Finalmente, la conversión mutua entre los valores de color de la página web es en realidad un problema de cliché. Acabo de enumerar uno de ellos aquí. Creo que hay más y mejores métodos para usar. Todos son bienvenidos a proponerlo, comunicarse y avanzar juntos ~~