如何将整数转换为 javascript 颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11866781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I convert an integer to a javascript color?
提问by user1585020
I have an integer which I need to convert to a color in javascript. I am using an MVC model and am trying to replicate a model in a software for a web interface. I have the color in integer format from the database. It needs to be converted to a color in javascript.
我有一个整数，我需要在 javascript 中将其转换为颜色。我正在使用 MVC 模型，并试图在软件中复制模型以用于 Web 界面。我有来自数据库的整数格式的颜色。它需要在 javascript 中转换为颜色。
For example: integers like -12525360, -5952982
例如：像 -12525360、-5952982 这样的整数
I have the code like this :
我有这样的代码：
items[x].barStyle = "stroke: Black; fill = Red";
So instead of giving the fill:Red, I need to give it the exact color corresponding to the integer value.
因此，我需要为它提供与整数值对应的确切颜色，而不是给它填充：红色。
This is the code I have written in C#. I need the same thing in javascript. Here resourcecolor= the integer input.
这是我用 C# 编写的代码。我需要在 javascript 中做同样的事情。这里 resourcecolor= 整数输入。
var bytes = BitConverter.GetBytes(resourcecolor);
ti.color = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);
回答by Esailija
In javascript, you express a ARGB color that is to be used with canvas or css as a string like "rgba(0-255,0-255,0-255,0-1)".
在 javascript 中，您将要与画布或 css 一起使用的 ARGB 颜色表示为类似"rgba(0-255,0-255,0-255,0-1)".
You can convert the integer to that string format with this function:
您可以使用此函数将整数转换为该字符串格式：
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)"
回答by nuno
Try:
尝试：
hexColour = yourNumber.toString(16)
hexColour = yourNumber.toString(16)
You may want to normalize 'yourNumber' too.
您可能也想标准化“yourNumber”。
回答by Magnus
Reading the comments on the question it seems you are able to manipulate the value on the server before its sent to the client. If you are using .NET I suggest using the ColorTranslator
阅读有关该问题的评论，似乎您可以在将值发送到客户端之前操作服务器上的值。如果您使用的是 .NET，我建议您使用ColorTranslator
int intColor = -12525360;
string htmlColor = ColorTranslator.ToHtml(Color.FromArgb(intColor)); //#40E0D0
Or this (if you need the alpha channel):
或者这个（如果你需要 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);
回答by Ben
Disclosure: I'm the author of the library suggested below.
披露：我是下面建议的图书馆的作者。
If you want to use a library rather than coding it yourself, the pusher.colorJavascript library supports integer to HTML color conversions:
如果你想使用一个库而不是自己编码，pusher.colorJavascript 库支持整数到 HTML 的颜色转换：
// Will set c to "rgba(105,80,131,1.0)"
var c = pusher.color('packed_argb', -9875325).html()
Or if you wanted a different format:
或者，如果您想要不同的格式：
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"
Internally the library uses code very similar to Esailija'sanswer.
该库在内部使用与Esailja 的答案非常相似的代码。
回答by noelicus
Really simply:
真的很简单：
colorString = "#" + colour.toString(16).padStart(6, '0');
But when I actually reference it I also remove the alpha from the integer and set the style colour at the same time, so the whole line is:
但是当我实际引用它时，我也会从整数中删除 alpha 并同时设置样式颜色，所以整行是：
document.getElementById('selectColourBtn').style.color = "#" + (colour & 0x00FFFFFF).toString(16).padStart(6, '0');
