从Javascript中的rgb字符串中获取颜色组件？

Question

我正在使用Javascript和Canvas制作绘画应用程序,并使用此格式的字符串来指定所选颜色:

"rgb(255,0,0)"

因为canvas上下文fillStyle属性接受该格式的字符串.

但是,我现在需要从这个字符串中获取单个组件,并且想知道是否有办法在没有混乱的字符串操作的情况下执行它.可能有一些内置的方法将该字符串转换为某种颜色对象,然后访问其r,g和b组件？

谢谢.

Answer 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"]

或者......一个非常简单的正则表达式:

编辑:哎呀,i出于某种原因在正则表达式中有一个.

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

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

console.log(rgb);

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

Answer 2

更简单的方式..

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

这里输出为

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

" 简单永远是美丽的!":)

Answer 3

我的版本采用HEX,RGB或RGBa字符串作为参数，不使用正则表达式，并返回一个具有红色、绿色和蓝色（以及 alpha 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 }

可能对某人有用。:)