[英]How do I convert an integer to a javascript color?
我有一個整數,我需要在 javascript 中將其轉換為顏色。 我正在使用 MVC 模型,並試圖在軟件中復制模型以用於 Web 界面。 我有來自數據庫的整數格式的顏色。 它需要在 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]);
在 javascript 中,您將要與畫布或 css 一起使用的 ARGB 顏色表示為類似"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/
嘗試:
hexColour = yourNumber.toString(16)
您可能也想標准化“yourNumber”。
真的很簡單:
colorString = "#" + colour.toString(16).padStart(6, '0');
但是當我實際引用它時,我也會從整數中刪除 alpha 並同時設置樣式顏色,所以整行是:
document.getElementById('selectColourBtn').style.color = "#" +
(colour & 0x00FFFFFF).toString(16).padStart(6, '0');
閱讀有關該問題的評論,似乎您可以在將值發送到客戶端之前操作服務器上的值。 如果您使用 .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);
披露:我是下面建議的圖書館的作者。
如果你想使用一個庫而不是自己編碼, 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"
該庫在內部使用與Esailja 的答案非常相似的代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.