背景色の六角レンチをJavaScriptの変数

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

質問

私のような新しいJavaScript、jQueryという問題を抱え:

いる一部のデータをPHPにインストールするには、一つのビットのデータが必要に背景色をの六角レンチの部X.

jQueryは、css("background-color")関数で取得できますのRGB値を背景をJavaScriptの変数となります。

CSS機能し回復しているように見えるような文字列をこのrgb(0,70,255).

見られませんでしたが他の取得の六角レンチの背景色もこのセットとしての六角レンチでCSS).

このように思わいに変換する必要があるのです。この機能変換のためのRGBを六角レンチが必要という三つの異なる変数、r、g、b.なっていなければいけないと考えて構文解析の文字列rgb(x、xx,xxx)のvar r=x;var g=xx;var b=xxx;なんだか。

またgoogleの構文解析の文字列をJavaScriptでがんを理解する正規表現というもの。

がわかりやすく伝えるための背景色を本部長としての六角での文字列に変換する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によってどれを取得します。他のヒント?感謝。

いないことは、あってはならないことでこの問題にすることができるのではなはrgba色成分による六角レンチ)ことができるようになうものがあります。かに変えることができる正規表現するようになります:

/^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('');
};

しかしながら、セッションのCSS色をrgbまた、このような:

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

であ CSSが有効な, なので安心です。

編集： 見 nickf回答 のためのエクスペディアに変換すればすることが必要となります。

また別の機能が少し戻しによるR0bb13).ることはないという感じで、regexので、また借りることができまからnickfそれを動作させるために。まだ投稿で過ごしたい人にはお勧めで興味深い方法を使用しませんのif文には、ループだけます。またこのスクリプトを返します六角レンチのの、#(でしたが必要とする 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のスクリプトは0046ffな0070ffがなければならない:P

更新、他 より良い 代替方法

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

これらのソリューションが失敗ザにはChromeをどを返しますrgba(x,x,x,x)を対象としたバックグラウンド-カラーです。

編集：これは必ずしもtrueです。クロームも設定背景をrgb()によっていた、ということがあります。最も長くはありませんのアルファチャンネル用クローム対応とrgbの代わりにrgba.

どこのソリューション機能 stringRGB2HEX コピーを返しますが、入力文字列がすべてのoccurenciesの色のフォーマット"rgb(r,g,b)"については、六角レンチフォーマット"#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.

A 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 を使う事によって、伝えたいでに私のプロジェクト

もう好きにしちゃってくださいが、このまま利用できるようになります$(セレクター).getHexBackgroundColor()の六角レンチ値易

$.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