Nhận thành phần màu từ chuỗi rgb trong Javascript?

Question

Tôi đang sử dụng javascript và Canvas để tạo ra một ứng dụng vẽ tranh và đã sử dụng chuỗi trong định dạng này để chỉ màu sắc lựa chọn:

"rgb(255,0,0)"

Bởi vì bối cảnh vải hữu fillstyle mất trong chuỗi định dạng đó.

Tuy nhiên, bây giờ tôi cần phải lấy các thành phần riêng lẻ từ chuỗi này và tự hỏi liệu có cách nào để làm điều đó mà không có thao tác chuỗi lộn xộn hay không. Có thể một số được xây dựng theo cách để chuyển đổi chuỗi đó thành một loại đối tượng màu và sau đó truy cập vào các thành phần r, g và b của nó?

Cảm ơn.

Answer 1

LƯU Ý - Chúng ta đều trên tàu với các regex ăn não của tôi và đuổi thái độ chó của tôi, nhưng phiên bản regex chỉ có vẻ là phương pháp tốt hơn. Quan điểm của tôi. Kiểm tra nó ra.

phương pháp 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/

Đầu ra:

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

Hoặc ... Một regex thực sự đơn giản:

EDIT: Rất tiếc, đã có một i trong regex vì một lý do nào đó.

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

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

console.log(rgb); 

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

Answer 2

Thậm chí nếu bạn có chắc các màu sắc sẽ được ở định dạng rgb, và không RGBA, hex, tên màu, hoặc HSL, bạn vẫn có thể có '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%) '); cảnh báo ([c.r, c.g, c.b])

lưu ý- Nếu bạn đang sử dụng canvas, bạn có bản đồ.

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

đơn giản hơn nhiều cách ..

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

và ở đây có các đầu ra như

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

"đơn giản luôn là đẹp!":)

Answer 4

Phiên bản của tôi có một chuỗi số HEX, RGB hoặc RGBa làm đối số, không sử dụng regEx và trả về đối tượng có giá trị số màu đỏ, xanh lục và xanh dương (và alpha cho 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 } 

Có thể hữu ích cho người khác. :)

Answer 5

Làm thế nào về việc sử dụng một thư viện màu như the xolor library:

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

Answer 6

Đối với những người sử dụng một bảng chọn màu sắc, thư viện này cũng cho phép để chuyển đổi màu sắc trong nhiều định dạng: https://tovic.github.io/color-picker/

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