¿Obtienes un componente de color de una cadena de rgb en Javascript?

Question

estoy usando JavaScript y Canvas para hacer una aplicación de pintura y estaba usando cuerdas en este formato para designar colores elegidos:

"rgb(255,0,0)"

Debido a que el contexto de la lona propiedad fillStyle toma en las cadenas de ese formato.

Sin embargo, ahora necesito obtener componentes individuales de esta cadena y me preguntaba si había una manera 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.

Answer 1

NOTA - Estamos todos a bordo con la expresión regular comió mi cerebro y pateó mi actitud perro, pero la versión de expresiones regulares sólo parece el mejor método. Mi opinión. Echale un vistazo.

método de no expresión regular:

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

rgb = rgb.substring(4, rgb.length-1) 
     .replace(/ /g, '') 
     .split(','); 

console.log(rgb); 

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

Salidas:

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

O ... Una expresión regular muy simple:

EDIT: Lamentablemente, tuvo una 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); 

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

Answer 2

Incluso si está seguro de los colores estarán en formato RGB y no RGBA, hexagonal, nombre del color, o HSL, todavía 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 ([c.r, c.g, c.b])

nota- Si está utilizando lienzo, tiene un mapa.

lo contrario-

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

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 es siempre bella!":)

Answer 4

Mi versión toma una cadena HEX, RGB o RGBa como un argumento, no utiliza expresiones regulares, y devuelve un objeto con rojo, verde y azul (y alfa para RGBa) valores numéricos.

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 a alguien. :)

Answer 5

¿Cómo sobre el uso de una biblioteca de colores como the xolor library:

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

Answer 6

Para las personas que utilizan un selector de color, esta biblioteca también permite convertir los colores en muchos formatos: https://tovic.github.io/color-picker/

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

No