javascript - react - tinycolor npm
Obtener un componente de color de una cadena de rgb en Javascript? (6)
¿Qué tal si usamos una biblioteca de colores como la biblioteca xolor ?
xolor("rgb(200,100,40)").r // returns the red part
Estoy usando Javascript y Canvas para hacer una aplicación de pintura y estaba usando cadenas en este formato para designar los colores elegidos:
"rgb(255,0,0)"
Debido a que el contexto canvas propiedad fillStyle toma cadenas de ese formato.
Sin embargo, ahora necesito obtener componentes individuales de esta cadena y me preguntaba si había una forma de hacerlo sin manipulación complicada de cadenas. ¿Posiblemente alguna forma integrada para convertir esa cadena en una especie de objeto de color y luego acceder a sus componentes r, gyb?
Gracias.
Incluso si está seguro de que los colores estarán en formato rgb, y no en rgbA, hex, nombre de color o hsl, aún puede tener ''rgb (25%, 55%, 100%)''.
function Rgb(rgb){
if(!(this instanceof Rgb)) return new Rgb(rgb);
var c= rgb.match(//d+(/./d+)?%?/g);
if(c){
c= c.map(function(itm){
if(itm.indexOf(''%'')!= -1) itm= parseFloat(itm)*2.55;
return parseInt(itm);
});
}
this.r= c[0];
this.g= c[1];
this.b= c[2];
}
var c = Rgb (''rgb (10%, 25%, 55%)''); alerta ([cr, cg, cb])
nota- Si está utilizando lienzo, tiene un mapa.
de otra manera-
Array.prototype.map=Array.prototype.map || function(fun, scope){
var T= this, L= T.length, A= Array(L), i= 0;
if(typeof fun== ''function''){
while(i<L){
if(i in T){
A[i]= fun.call(scope, T[i], i, T);
}
++i;
}
return A;
}
}
Mi versión toma una cadena HEX , RGB o RGBa como argumento, no usa regEx y devuelve un objeto con valores numéricos rojos, verdes y azules (y alfa para RGBa ).
var RGBvalues = (function() {
var _hex2dec = function(v) {
return parseInt(v, 16)
};
var _splitHEX = function(hex) {
var c;
if (hex.length === 4) {
c = (hex.replace(''#'','''')).split('''');
return {
r: _hex2dec((c[0] + c[0])),
g: _hex2dec((c[1] + c[1])),
b: _hex2dec((c[2] + c[2]))
};
} else {
return {
r: _hex2dec(hex.slice(1,3)),
g: _hex2dec(hex.slice(3,5)),
b: _hex2dec(hex.slice(5))
};
}
};
var _splitRGB = function(rgb) {
var c = (rgb.slice(rgb.indexOf(''('')+1, rgb.indexOf('')''))).split('','');
var flag = false, obj;
c = c.map(function(n,i) {
return (i !== 3) ? parseInt(n, 10) : flag = true, parseFloat(n);
});
obj = {
r: c[0],
g: c[1],
b: c[2]
};
if (flag) obj.a = c[3];
return obj;
};
var color = function(col) {
var slc = col.slice(0,1);
if (slc === ''#'') {
return _splitHEX(col);
} else if (slc.toLowerCase() === ''r'') {
return _splitRGB(col);
} else {
console.log(''!Ooops! RGBvalues.color(''+col+'') : HEX, RGB, or RGBa strings only'');
}
};
return {
color: color
};
}());
console.debug(RGBvalues.color(''rgb(52, 86, 120)''));
//-> { r: 52, g: 86, b: 120 }
console.debug(RGBvalues.color(''#345678''));
//-> { r: 52, g: 86, b: 120 }
console.debug(RGBvalues.color(''rgba(52, 86, 120, 0.67)''));
//-> { r: 52, g: 86, b: 120, a: 0.67 }
console.debug(RGBvalues.color(''#357''));
//-> { r: 51, g: 85, b: 119 }
Puede ser útil para alguien. :)
Para las personas que usan un selector de color, esta biblioteca también permite convertir colores en muchos formatos: https://tovic.github.io/color-picker/
CP.RGB2HEX([255, 255, 255])
manera mucho más simple ..
var rgb = ''rgb(200, 12, 53)''.match(//d+/g);
console.log(rgb);
y aquí viene la salida como
["200", "12", "53"]
"¡ Simple siempre es hermoso !" :)
NOTA : Todos estamos de acuerdo con que la expresión regular se comió mis cerebros y pateó la actitud de mi perro , pero la versión de expresiones regulares parece ser el mejor método. Mi opinión. Echale un vistazo.
Método no regex:
var rgb = ''rgb(200, 12, 53)'';
rgb = rgb.substring(4, rgb.length-1)
.replace(/ /g, '''')
.split('','');
console.log(rgb);
http://jsfiddle.net/userdude/Fg9Ba/
Productos:
["200", "12", "53"]
O ... Una expresión regular realmente simple:
EDITAR: Ooops, tuve un i en la expresión regular por alguna razón.
var rgb = ''rgb(200, 12, 53)'';
rgb = rgb.replace(/[^/d,]/g, '''').split('','');
console.log(rgb);