如何将整数转换为javascript颜色?

时间:2012-08-08 14:30:53

标签: javascript

我有一个整数,我需要转换为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]);

5 个答案:

答案 0 :(得分:15)

在javascript中,您表示将与canvas或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/

答案 1 :(得分:5)

尝试:

hexColour = yourNumber.toString(16)

你也可以将'yourNumber'标准化。

答案 2 :(得分: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);

答案 3 :(得分: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回答非常相似的代码。

答案 4 :(得分:0)

真的很简单:

colorString = "#" + colour.toString(16);

但是当我实际引用它时,我也从整数中删除了alpha并同时设置了样式颜色,所以整行是:

document.getElementById('selectColourBtn').style.color = "#" + (colour & 0x00FFFFFF).toString(16);