Priorità-colore esadecimale a variabile JavaScript

Question

Sono una specie di nuovo a JavaScript e jQuery e ora sto di fronte a un problema:

ho bisogno di inviare alcuni dati per PHP e un bit dei dati deve essere il colore di sfondo esadecimale di div X.

jQuery ha la funzione css ("background-color") e con essa posso ottenere il valore RGB dello sfondo in una variabile JavaScript.

La funzione CSS sembra restituire una stringa come questa rgb (0, 70, 255).

Non sono riuscito a trovare alcun modo per ottenere l'esadecimale del colore di sfondo (anche se è impostato come esadecimale in CSS).

Quindi sembra che ho bisogno di convertirlo. Ho trovato una funzione per convertire RGB in esadecimale, ma ha bisogno di essere chiamata con tre diverse variabili, r, geeb. Quindi avrei bisogno di analizzare la stringa rgb (x, xx, xxx) in var r = x; var g = xx; var b = xxx; in qualche modo.

Ho provato a google le stringhe di analisi con JavaScript, ma non ho davvero capito la cosa delle espressioni regolari.

C'è un modo per ottenere il colore di sfondo di div come esadecimale oppure la stringa può essere convertita in 3 diverse variabili?

Answer 1

provare questo fuori:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way. 

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"] 

delete (parts[0]); 
for (var i = 1; i <= 3; ++i) { 
    parts[i] = parseInt(parts[i]).toString(16); 
    if (parts[i].length == 1) parts[i] = '0' + parts[i]; 
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF" 

In risposta alla domanda nei commenti qui sotto:

che sto cercando di modificare l'espressione regolare per gestire sia RGB e RGBA a seconda quale ricevo . Qualche suggerimento? Grazie.

io non sono esattamente sicuro se ha un senso nel contesto di questa domanda (perché non si può rappresentare un colore RGBA in esadecimale), ma credo che ci potrebbero essere altri usi. In ogni caso, è possibile cambiare l'espressione regolare per essere come questo: uscita

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/ 

Esempio:

var d = document.createElement('div'); 
d.style.backgroundColor = 'rgba(255, 60, 50, 0)'; 

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor); 

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"] 

Answer 2

È possibile impostare un colore CSS utilizzando rgb anche, come questo:

background-color: rgb(0, 70, 255); 

È valid CSS, non ti preoccupare.

---

Edit: vedere nickf answer per un bel modo per convertire, se è assolutamente necessario.

Answer 3

ho trovato un'altra funzione un po 'indietro (by R0bb13). Non ha la regex, quindi ho dovuto prenderlo in prestito da nickf per farlo funzionare correttamente. Sto solo pubblicandolo perché è un metodo interessante che non usa un'istruzione if o un ciclo per darti un risultato.Anche questo script restituisce il valore esadecimale con un # (E 'stato necessario dal plugin Farbtastic stavo usando al momento)

//Function to convert hex format to a rgb color 
function rgb2hex(rgb) { 
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
function hex(x) { 
    return isNaN(x) ? "00" : hexDigits[(x - x % 16)/16] + hexDigits[x % 16]; 
} 
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

// call the function: rgb("rgb(0, 70, 255)"); 
// returns: #0046ff 

Nota: Il risultato esadecimale da uno script di nickf dovrebbe essere 0046ff e non 0070ff, ma nessun grande affare: P

Update, un altro meglio metodo alternativo:

function rgb2hex(rgb) { 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
function hex(x) { 
    return ("0" + parseInt(x).toString(16)).slice(-2); 
} 
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

Answer 4

ho trovato questa soluzione http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx e lo sto usando nel mio progetto

Answer 5

Queste soluzioni non funzioneranno in Chrome, poiché restituisce un rgba (x, x, x, x) per colore di sfondo.

MODIFICA: questo non è necessariamente vero. Chrome continuerà a impostare gli sfondi usando rgb(), a seconda di cosa stai facendo. Molto probabilmente fino a quando non viene applicato alcun canale alfa, Chrome risponderà con rgb anziché con rgba.

Answer 6

Che ne dite di questa soluzione, la funzione stringRGB2HEX restituisce una copia della stringa di input in cui tutti i occurencies di colori in formato "rgb (r, g, b)" sono stati sostituiti dal formato esadecimale "#RRGGBB".

//function for private usage of the function below 
    //(declaring this one in global scope should make it faster rather than 
    //declaraing it as temporary function inside stringRGB2HEX that need to be 
    //instantieted at every call of stringRGB2HEX 
    function _rgb2hex(rgb_string, r, g, b) 
    { 
     //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0' 
     var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: (r + (256 * g) + (65536 * b) + 16777216) 
     //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx] 
     return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above 
    } 

    function stringRGB2HEX(string) 
    { 
     if(typeof string === 'string') 
     string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex); 
     return string; 
    } 

Questo converte anche i colori RGB in stili complessi come background.

Un valore style.background come: "none no-repeat scroll rgb(0, 0, 0)" viene facilmente convertito in "none no-repeat scroll #000000" semplicemente facendo stringRGB2HEX(style.background)

Answer 7

con jQuery ..

var cssColorToHex = function(colorStr){ 
    var hex = '#'; 
    $.each(colorStr.substring(4).split(','), function(i, str){ 
     var h = ($.trim(str.replace(')',''))*1).toString(16); 
     hex += (h.length == 1) ? "0" + h : h; 
    }); 
    return hex; 
}; 

Answer 8

http://www.phpied.com/rgb-color-parser-in-javascript/

classe

Un JavaScript che accetta una stringa e cerca di capire fuori un colore valido. Alcuni ingressi accettate sono ad esempio:

* rgb(0, 23, 255) 
* #336699 
* ffee66 
* fb0 
* red 
* darkblue 
* cadet blue 

Answer 9

Se si dispone di jQuery a disposizione, questa è la versione super-compatta che ho appena si avvicinò con.

 
var RGBtoHEX = function(color) { 
    return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){ 
    return ('0' + parseInt(digit).toString(16)).slice(-2) 
    }).join(''); 
}; 

Answer 10

Qui si va, questo vi permetterà di utilizzare $ (selector) .getHexBackgroundColor() per restituire il valore esadecimale facile:

$.fn.getHexBackgroundColor = function() { 
    var rgb = $(this).css('background-color'); 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);} 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
}