Ottieni un componente colore da una stringa rgb in Javascript?

Question

Sto utilizzando Javascript e Canvas per fare un app pittura e stava usando le stringhe in questo formato per indicare i colori scelti:

"rgb(255,0,0)"

Poiché il contesto tela proprietà FillStyle prende in stringhe di quel formato.

Tuttavia, ora ho bisogno di ottenere singoli componenti da questa stringa e mi chiedevo se c'era un modo per farlo senza manipolare le stringhe. Forse qualche modo integrato per convertire quella stringa in una sorta di oggetto colore e quindi accedere ai suoi componenti r, g e b?

Grazie.

Answer 1

NOTA - Siamo tutti a bordo con l'espressione regolare ha mangiato il mio cervello e preso a calci il mio atteggiamento cane, ma la versione regex appena sembra il metodo migliore. La mia opinione. Controlla.

metodo 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/

Uscite:

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

Oppure ... Davvero un semplice espressione regolare:

EDIT: Ops, ha avuto un i nella regex per qualche motivo.

var rgb = 'rgb(200, 12, 53)'; 

rgb = rgb.replace(/[^\d,]/g, '').split(','); 

console.log(rgb); 

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

Answer 2

Anche se si è sicuri i colori saranno in formato RGB, e non RGBA, esadecimale, nome del colore, o HSL, è ancora possibile avere '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%)'); Avviso ([c.r, c.g, c.b])

note- Se si utilizza la tela, si dispone di una mappa.

otherwise-

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

Answer 3

molto più semplice modo ..

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

e qui viene l'uscita come

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

"semplice è sempre bella!":)

Answer 4

La mia versione prende una stringa HEX, RGB o RGBa come argomento, non usa Regex, e restituisce un oggetto con il rosso, verde e blu (e alfa per RGBa) Numero valori.

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 } 

Potrebbe essere utile a qualcuno. :)

Answer 5

ne dite di usare una libreria di colori come the xolor library:

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

Answer 6

Per le persone che utilizzano un selettore di colori, questa libreria permette anche di convertire i colori in diversi formati: https://tovic.github.io/color-picker/

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

Non