Получить компонент цвета из строки rgb в Javascript?

Я использую Javascript и Canvas для создания приложения для рисования и использовал строки в этом формате для обозначения выбранных цветов:

"rgb(255,0,0)"

Так как свойство fillStyle контекста canvas принимает строки этого формата.

Однако теперь мне нужно получить отдельные компоненты из этой строки и задалось вопросом, есть ли способ сделать это без беспорядочной манипуляции с строкой. Возможно, какой-то встроенный способ преобразования этой строки в какой-то цветной объект, а затем доступ к его компонентам r, g и b?

Спасибо.

Ответ 1

ПРИМЕЧАНИЕ. Мы все на борту с регулярным выражением съели мои мозги и пнули мою собаку, но версия с регулярным выражением просто кажется лучшим методом. Мое мнение. Проверьте это.

Метод без регулярного выражения:

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

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

console.log(rgb);

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

Выходы:

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

Или... Очень простое регулярное выражение:

РЕДАКТИРОВАТЬ: Ooops, по какой-то причине в regex было i.

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

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

console.log(rgb);

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

Ответ 2

гораздо проще.

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

и здесь выводится как

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

" просто всегда красиво!":)

Ответ 3

Даже если вы уверены, что цвета будут в формате rgb, а не rgbA, hex, color name или hsl, вы все равно можете иметь "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%)'); alert ([c.r, c.g, c.b])

note- Если вы используете холст, у вас есть карта.

в противном случае -

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

Ответ 4

Как использовать библиотеку цветов, такую как библиотека xolor:

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

Ответ 5

Моя версия принимает строку HEX, RGB или RGBa в качестве аргумента, не использует regEx и возвращает объект с красными, зелеными и синими (и альфа для 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 }

Может быть полезно кому-то.:)

Ответ 6

Для людей, использующих подборщик цветов, эта библиотека также позволяет конвертировать цвета во многих форматах: https://tovic.github.io/color-picker/

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