Obtenez un composant de couleur à partir d'une chaîne rgb en Javascript?

J'utilise Javascript et Canvas pour créer une application de peinture et j'utilise des chaînes dans ce format pour désigner les couleurs choisies:

"rgb(255,0,0)"

Parce que la propriété fillStyle du contexte de la toile prend des chaînes de ce format.

Cependant, je dois maintenant obtenir des composants individuels de cette chaîne et je me demandais s'il existait un moyen de le faire sans manipulation de chaîne désordonnée. Peut-être que certains ont-ils été construits pour convertir cette chaîne en une sorte d'objet couleur et ensuite accéder à ses composants r, g et b?

Merci.

NOTE – Nous sommes tous à bord de la regex a mangé mon cerveau et a donné un coup de pied à l' attitude de mon chien , mais la version regex semble être la meilleure méthode. Mon avis. Vérifiez-le.

Méthode non-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/

Les sorties:

 ["200", "12", "53"] 

Ou … Une regex très simple:

EDIT: Ooops, j'avais un i dans le regex pour une raison quelconque.

 var rgb = 'rgb(200, 12, 53)'; rgb = rgb.replace(/[^\d,]/g, '').split(','); console.log(rgb); 

http://jsfiddle.net/userdude/Fg9Ba/2

Beaucoup plus simple …

  var rgb = 'rgb(200, 12, 53)'.match(/\d+/g); console.log(rgb); 

Et voici la sortie comme

  ["200", "12", "53"] 

" Simple est toujours beau !" 🙂

Même si vous êtes sûr que les couleurs seront en format rgb, et non rgbA, hex, nom de couleur ou hsl, vous pouvez toujours avoir '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%)'); Alerte ([cr, cg, cb])

Note- Si vous utilisez une toile, vous avez une carte.

autrement-

 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; } } 

Ma version prend une chaîne HEX , RGB ou RGBa en tant qu'argument, n'utilise pas de regEx, et renvoie un objet avec les valeurs RGBa rouge, vert et bleu (et alpha pour 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 } 

Peut être utile à quelqu'un. 🙂

Que diriez-vous d'utiliser une bibliothèque de couleurs comme la bibliothèque xolor ?

 xolor("rgb(200,100,40)").r // returns the red part 

Pour les personnes qui utilisent un sélecteur de couleurs, cette bibliothèque permet également de convertir des couleurs dans de nombreux formats: https://tovic.github.io/color-picker/

 CP.RGB2HEX([255, 255, 255])