web-dev-qa-db-fra.com

Obtenir un composant de couleur d'une chaîne RGB en Javascript?

J'utilise Javascript et Canvas pour créer une application de peinture. J'utilisais 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 canevas prend des chaînes de ce format.

Cependant, je dois maintenant obtenir des composants individuels à partir de cette chaîne et je me demandais s'il existait un moyen de le faire sans manipulation désordonnée des chaînes. Peut-être une manière intégrée de convertir cette chaîne en une sorte d'objet couleur et d'accéder ensuite à ses composants r, g et b?

Merci.

javascripthtmlhtml5canvascolors
30
Ryan Peschel

NOTE - Nous sommes tous à bord avec l'attitude regex m'a mangé la cervelle et a donné un coup de pied à mon chien, mais la version regex semble tout simplement 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: Oups, avait une i dans la 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

38
Jared Farrish

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

15
user372551

Pourquoi ne pas utiliser une bibliothèque de couleurs comme la bibliothèque de couleurs :

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

Ma version utilise comme argument une chaîne HEX, RGB ou RGBa, n'utilise aucun regEx et renvoie un objet avec des valeurs numériques rouge, verte et bleue (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 }

Pourrait être utile à quelqu'un. :)

2
Brian Peacock

Même si vous êtes sûr que les couleurs seront au format RGB, et non RGB, Hex, Nom de la couleur ou HSL, vous pouvez toujours avoir "RVB (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%)'); alert ([c.r, c.g, c.b])

note- Si vous utilisez canvas, vous avez map.

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

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

CP.RGB2HEX([255, 255, 255])
0
Julien Le Coupanec