لون الخلفية عرافة إلى متغير جافا سكريبت

Question

انا من النوع الجديد إلى تفعيل جافا سكريبت ومسج و الآن أنا أواجه مشكلة:

أنا بحاجة إلى نشر بعض البيانات PHP و بت واحد من البيانات يجب أن يكون لون خلفية عرافة من شعبة X.

مسج قد css("لون الخلفية") وظيفة و مع ذلك يمكنني الحصول RGB قيمة أساسية في متغير جافا سكريبت.

CSS وظيفة يبدو أن عودة سلسلة مثل هذه rgb(0, 70, 255).

لم أتمكن من العثور على أي طريقة للحصول على عرافة من لون الخلفية (على الرغم من انها مجموعة عرافة في CSS).

يبدو أني تحتاج إلى تحويل.لقد وجدت وظيفة لتحويل RGB إلى عرافة ، لكنه يحتاج إلى أن يدعى مع ثلاثة متغيرات مختلفة, r, g و b.لذلك أنا في حاجة إلى تحليل سلسلة rgb(x,xx,xxx) في var r=x ؛ var g=xx.var b=xxx;بطريقة أو بأخرى.

حاولت جوجل تحليل السلاسل مع جافا سكريبت لكنني لم أفهم حقا التعبيرات العادية الشيء.

هل هناك طريقة للحصول على لون الخلفية من شعبة كما عرافة ، أو يمكن أن السلسلة يمكن تحويلها إلى 3 مختلف المتغيرات ؟

Answer 1

ومحاولة ذلك:

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?\((\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"]

Answer 2

إذا كان لديك مسج المتاحة، هذا هو نسخة فائقة المدمجة التي جئت للتو مع.

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

Answer 3

ويمكنك تحديد لون CSS باستخدام RGB أيضا، مثل هذا:

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

صالحة CSS ، لا تقلق.

---

تعديل: عرض nickf الإجابة للحصول على طريقة لطيفة لتحويل أنه إذا كنت في حاجة على الاطلاق ل.

Answer 4

لقد وجدت وظيفة أخرى لحظة العودة (قبل R0bb13).أنها لا تملك regex ، لذلك اضطررت للاقتراض من nickf لجعلها تعمل بشكل صحيح.أنا فقط نشر لأنها طريقة مثيرة للاهتمام لا يحتاج إلى بيان أو إذا حلقة تعطيك نتيجة.أيضا هذا البرنامج النصي بإرجاع قيمة ست عشرية مع # (كان يحتاجها 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]);
}

Answer 5

ومع مسج ..

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 6

وستفشل هذه الحلول في كروم، وتقوم بإرجاع رغبا (س، س، س، خ) للون الخلفية.

وتحرير: هذا ليس صحيحا بالضرورة. سوف الكروم يزال يتم تعيين الخلفيات باستخدام RGB ()، اعتمادا على ما تقومون به. على الأرجح طالما لا يوجد أي قناة ألفا التطبيقية، وسوف كروم الرد RGB بدلا من رغبا.

Answer 7

ماذا عن هذا الحل ، وظيفة stringRGB2HEX يعود نسخة من سلسلة الإدخال حيث كل occurencies من الألوان في شكل "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.

A style.background قيمة مثل: "none no-repeat scroll rgb(0, 0, 0)" يتم تحويلها بسهولة إلى "none no-repeat scroll #000000" ببساطة عن طريق القيام stringRGB2HEX(style.background)

Answer 8

http://www.phpied.com/rgb-color-parser -in-جافا سكريبت /

وهناك فئة جافا سكريبت يقبل سلسلة ويحاول معرفة لونا صالحا للخروج منه. بعض المدخلات المقبولة هي على سبيل المثال:

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

Answer 9

ولقد وجدت هذا الحل HTTP: // haacked كوم / أرشيف / 2009/12/29 / تحويل-RGB إلى hex.aspx وأنا استخدامه في مشروعي

Answer 10

تفضل, هذا سوف يسمح لك لاستخدام $(محدد).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]);
}