2012-08-08 36 views
3

我有一個整數,我需要轉換爲JavaScript中的顏色。 我正在使用MVC模型,並試圖在Web界面的軟件中複製模型。 我有從數據庫中的整數格式的顏色。它需要轉換爲JavaScript中的顏色。如何將整數轉換爲javascript顏色?

例如:像-12525360整數,-5952982

我有這樣的代碼:

items[x].barStyle = "stroke: Black; fill = Red"; 

因此而不是給填充:紅,我需要給它相應的準確的顏色到整數值。

這是我用C#編寫的代碼。我需要在JavaScript中的相同的東西。 這裏resourcecolor =整數輸入。

 var bytes = BitConverter.GetBytes(resourcecolor); 
    ti.color = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]); 
+6

你需要更具體。 – Austin 2012-08-08 14:31:45

+1

整數如何看起來像?您想要獲得哪種JavaScript顏色格式? – tuxtimo 2012-08-08 14:32:21

+0

12 =黃色; – 2012-08-08 14:32:31

回答

2

嘗試:

hexColour = yourNumber.toString(16)

您可能需要正常化 'yourNumber' 太多。

+1

爲了在純Javascript中放置更多的上下文,這可以將數字轉換爲顏色。 td.style.backgroundColor =「#」+ value.toString(16); – Dan 2014-11-11 10:32:49

+1

它不適用於某些情況,例如int值0不能轉換爲慾望'#000000' – 2017-05-05 02:24:26

8

在JavaScript中,您表達了一種ARGB顏色,它將與canvas或css一起使用,如"rgba(0-255,0-255,0-255,0-1)"這樣的字符串。

您可以將整數轉換成字符串格式使用此項功能:

function toColor(num) { 
    num >>>= 0; 
    var b = num & 0xFF, 
     g = (num & 0xFF00) >>> 8, 
     r = (num & 0xFF0000) >>> 16, 
     a = ((num & 0xFF000000) >>> 24)/255 ; 
    return "rgba(" + [r, g, b, a].join(",") + ")"; 
} 
toColor(-5952982) 
//"rgba(165,42,42,1)" 
toColor(-12525360) 
//"rgba(64,224,208,1)" 

演示:http://jsfiddle.net/Ectpk/

1

閱讀似乎你能夠之前在服務器上操作的值問題的意見它發送給客戶端。如果您使用的是.NET,我建議使用ColorTranslator

int intColor = -12525360; 
string htmlColor = ColorTranslator.ToHtml(Color.FromArgb(intColor)); //#40E0D0 

還是這個(如果你需要alpha通道):

int intColor = -12525360; 
    Color c = Color.FromArgb(intColor); 
    string htmlColor = String.Format(CultureInfo.InvariantCulture, 
         "rgba({0},{1},{2},{3})", c.R, c.G, c.B, c.A/255f); 
+0

這也是可行的,但如果在.NET中有'rgba'格式,則應該使用它,因爲'#xxxxxx'格式不能編碼阿爾法 – Esailija 2012-08-08 15:04:41

+0

好點@Esailija,更新的答案來支持。 – Magnus 2012-08-08 15:13:38

+0

順便說一句我不知道我可以做我編輯的帖子是在.NET中,但在CSS的rgba格式的alpha值是介於0-1(浮動)之間,而不是0-255。那裏可能應該有某種類型的演員? – Esailija 2012-08-08 15:18:08

1

披露:我的圖書館筆者建議下面。

如果你想使用一個庫,而不是你自己的編碼吧,pusher.color Javascript庫支持整數HTML顏色轉換:

// Will set c to "rgba(105,80,131,1.0)" 
var c = pusher.color('packed_argb', -9875325).html() 

或者,如果你想要一個不同的格式:

var colorObject = pusher.color('packed_argb', -9875325); 
var htmlString = colorObject.html();   // i.e. "rgba(105,80,131,1.0)" 
var colorName = colorObject.html('keyword'); // closest named color 
var hexString = colorObject.html('hex6'); // "#695083" 

庫內部使用的代碼與Esailija's的答案非常相似。