Culoare de fundal hex la variabilă JavaScript

voturi
35

Sunt un fel de noi pentru a JavaScript și jQuery, iar acum am o problemă cu care se confruntă:

Am nevoie pentru a posta unele date la PHP și un bit de date trebuie să fie hex de culoare de fundal de X. div

jQuery are CSS ( „culoare de fundal“), funcția și cu ea am putea obține o valoare RGB de fundal într-o variabilă JavaScript.

Funcția CSS pare să se întoarcă un șir de caractere ca acest rgb (0, 70, 255).

Nu am putut găsi nici o modalitate de a obține hex de culoare de fundal (chiar dacă este setat ca hex în CSS).

Deci, se pare ca am nevoie să-l convertească. Am găsit o funcție de conversie RGB la hex, dar trebuie să fie numit cu trei variabile diferite, r, g și b. Așa că am avea nevoie pentru a analiza șir RGB (x, xx, xxx) în var r = x; var g = xx; var b = xxx; oarecum.

Am încercat să google parsarea siruri de caractere cu JavaScript, dar nu am înțeles cu adevărat expresii regulate lucru.

Există o modalitate de a obține culoare de fundal de div ca hex, sau poate șirul fi convertite în 3 variabile diferite?

Întrebat 12/03/2009 la 13:44
sursa de către utilizator
În alte limbi...                            


10 răspunsuri

voturi
8

Puteți seta o culoare CSS folosind rgb, de asemenea, cum ar fi aceasta:

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

Este valid CSS , nu vă faceți griji.


Editare: A se vedea răspunsul nickf pentru un mod frumos de a - l transforma în cazul în care aveți nevoie să absolut.

Publicat 12/03/2009 la 13:53
sursa de către utilizator

voturi
62

încercați asta:

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"

Ca răspuns la întrebarea în comentariile de mai jos:

Am încercat să modifice regex să se ocupe de ambele rgb și RGBA funcție pe care o primesc. Orice sugestii? Mulțumiri.

Nu sunt sigur dacă are sens în contextul acestei întrebări (din moment ce nu poate reprezenta o culoare RGBA în hex), dar cred că ar putea exista alte utilizări. Oricum, ai putea schimba regex să fie așa:

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

Exemplu de ieșire:

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"]
Publicat 12/03/2009 la 13:58
sursa de către utilizator

voturi
5

Am găsit o altă funcție de un timp înapoi ( de R0bb13 ). Ea nu are regex, așa că a trebuit să - l împrumute de la nickf pentru a face să funcționeze în mod corespunzător. Sunt doar o postez pentru ca este o metodă interesantă , care nu utilizează o instrucțiune if sau o buclă pentru a vă oferi un rezultat. De asemenea , acest script returnează valoarea hex cu un # (A fost nevoie de Farbtastic plugin - am folosit la momentul respectiv )

//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

Notă: Rezultatul hex de la scenariu nickf ar trebui să fie 0046ff și să nu 0070ff, dar nu e mare: P

Update, o alta mai bună metodă alternativă:

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]);
}
Publicat 29/07/2009 la 01:32
sursa de către utilizator

voturi
0

Am găsit această soluție http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx și eu sunt, folosind în proiectul meu

Publicat 11/01/2010 la 13:38
sursa de către utilizator

voturi
1

Aceste soluții vor eșua în Chrome, deoarece returnează un RGBA (x, x, x, x) pentru culoare de fundal.

EDIT: Acest lucru nu este neapărat adevărat. Chrome va stabili în continuare fundaluri utilizând rgb (), în funcție de ceea ce faci. Cel mai probabil, atâta timp cât nu există nici un canal alfa aplicat, Chrome va răspunde cu rgb în loc de RGBA.

Publicat 22/05/2010 la 17:35
sursa de către utilizator

voturi
1

Ce zici de această soluție, funcția stringRGB2HEX returnează o copie a șirului de intrare în cazul în care toate occurencies de culori în formatul „RGB (r, g, b)“ au fost înlocuite cu formatul hex „#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;
   }

Acesta convertește , de asemenea , culori RGB în stiluri complexe , cum ar fi background.

O style.backgroundvaloare cum ar fi: "none no-repeat scroll rgb(0, 0, 0)"este ușor de transformat într - "none no-repeat scroll #000000"pur și simplu prin a facestringRGB2HEX(style.background)

Publicat 19/08/2010 la 14:06
sursa de către utilizator

voturi
3

Cu 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;
};
Publicat 16/11/2010 la 13:25
sursa de către utilizator

voturi
1

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

O clasă JavaScript care acceptă un șir de caractere și încearcă să găsească o culoare validă din ea. Unele intrări acceptate sunt, de exemplu:

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
Publicat 20/04/2011 la 06:54
sursa de către utilizator

voturi
10

Dacă aveți jQuery disponibile, acest lucru este versiunea super-compact, care tocmai am venit cu.

var RGBtoHEX = funcție (culoare) {
  întoarce "#" + $. hartă (color.match (/ \ b (\ d +) \ b / g), funcția (cifre) {
    return ( '0' + parseInt (cifre) .toString (16)). slice (-2)
  }).a adera('');
};
Publicat 22/04/2011 la 18:49
sursa de către utilizator

voturi
0

Aici te duci, acest lucru va permite să utilizați $ (selector) .getHexBackgroundColor () pentru a returna valoarea hex cu ușurință:

$.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]);
}
Publicat 09/08/2011 la 03:23
sursa de către utilizator

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more