배경 색상 육을 자바스크립트 변수

StackOverflow https://stackoverflow.com/questions/638948

문제

나는 종류의 새로운 JavaScript and jQuery 고 이제 내가 직면하는 문제점:

나를 게시 할 필요가 일부 데이터를 PHP 고 하나는 비트에 필요한 데이터의 것을 배경 색상의 진수 div X

jQuery 는 css("background-color")기능으로 그것을 얻을 수 있는 RGB 값의 배경으로 자바 스크립트 변수입니다.

CSS 기능을 보인하는 문자열을 반환하는 다음과 같이는 rgb(0,70,255).

I couldn't find any 을 얻을 육각의 배경 색상(도의 설정으로 진수에서 CSS).

그래서 그것을 것 같아 나를 변환해야 합니다.내가 찾는 기능을 변환하는 RGB 을 육지만,그것은 필요하라는 세 가지 다른 변수,r,g 및 b.그래서 나는 것이 필요한 분석은 문자열 rgb(x,xx xxx)로 var r=x;var g=xx;var b=xxx;습니다.

도 구글이 문자열을 구문 분석와 자바스크립트,하지 않았어요 정말로 이해하는 정규 표현식을 것입니다.

이 있을 얻을 수 있는 방법을 배경 색상의 div 로 진수,또는 문자열로 변환 3 개의 다른 변수가?

도움이 되었습니까?

해결책

이것을 시도하십시오 :

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"

아래 의견의 질문에 대한 응답으로 :

나는 어떤 것을 얻는 지에 따라 RGB와 RGBA를 모두 처리하도록 Regex를 수정하려고합니다. 힌트가 있습니까? 감사.

이 질문의 맥락에서 그것이 의미가 있는지 확실하지 않지만 (당신은 16 진수에서 RGBA 색상을 나타낼 수 없기 때문에) 다른 용도가있을 수 있다고 생각합니다. 어쨌든, 당신은 regex를 다음과 같이 바꿀 수 있습니다.

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

예제 출력 :

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

다른 팁

jQuery를 사용할 수 있다면, 이것은 제가 방금 찾은 슈퍼 컴팩트 버전입니다.

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

RGB를 사용하여 CSS 색상을 설정할 수도 있습니다.

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

그것은이다 유효한 CS, 괜찮아요.

편집하다: 보다 닉프 대답 절대적으로 필요하다면 그것을 변환하는 좋은 방법을 위해.

다시 한동안 다른 기능을 찾았습니다 (R0BB13에 의해). Regex가 없으므로 Nickf에서 빌려서 제대로 작동하도록해야했습니다. 나는 당신에게 결과를 제공하기 위해 if 문이나 루프를 사용하지 않는 흥미로운 방법이기 때문에 게시하고 있습니다. 또한이 스크립트는 #으로 16 진수를 반환합니다 ( Farbtastic 당시에 사용했던 플러그인)

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

참고 : Nickf의 스크립트의 16 진수는 0070ff가 아니라 0046ff 여야하지만 큰 문제는 없습니다.

업데이트, 다른 업데이트 더 나은 대체 방법 :

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

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

이러한 솔루션이 실패에 크롬,그것이 반환합니다 rgba(x,x,x,x)배경 색상.

편집:이것은 반드시 사실이다.Chrome 에서는 여전히 배경 설정을 사용하여 rgb()에 따라,당신이 무엇을 하고 있다.대부분 만큼이 없 알파 채널이 적용,크롬으로 응답 rgb 대신 rgba.

이 솔루션은 어떻습니까, 기능 Stringrgb2Hex "rgb (r, g, b)"형식의 모든 색상 발생률이 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;
   }

이 하나는 또한 복잡한 스타일로 RGB 색상을 변환합니다. background.

ㅏ style.background 값 : "none no-repeat scroll rgb(0, 0, 0)" 쉽게 변환됩니다 "none no-repeat scroll #000000" 단순히 그렇게함으로써 stringRGB2HEX(style.background)

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

문자열을 받아들이고 유효한 색상을 알아 내려고하는 JavaScript 클래스. 수용된 입력은 예를 들어 다음과 같습니다.

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

이 솔루션을 찾았습니다 http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx 그리고 나는 내 프로젝트에서 그것을 사용하고 있습니다

여기로 이동하면 $ (selector) .gethexbackgroundcolor ()를 사용하여 16 진수를 쉽게 반환 할 수 있습니다.

$.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]);
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top