Как я могу преобразовать целое число в цвет JavaScript?

Question

У меня есть целое число, которое мне нужно преобразовать в цвет в JavaScript. Я использую модель MVC и пытаюсь воспроизвести модель в программном обеспечении для веб-интерфейса. У меня есть цвет в целочисленном формате из базы данных. Это должно быть преобразовано в цвет в 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]);

Answer 1

В 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/

Answer 2

На самом деле просто:

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

Но когда я на самом деле ссылаюсь на него, я также удаляю альфу из целого числа и одновременно устанавливаю цвет стиля, поэтому вся строка выглядит так:

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

Answer 3

Пытаться:

hexColour = yourNumber.toString (16)

Вы можете также нормализовать 'yourNumber'.

Answer 4

Читая комментарии к вопросу, вы можете манипулировать значением на сервере до того, как оно будет отправлено клиенту. Если вы используете.NET, я предлагаю использовать ColorTranslator

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

Или это (если вам нужен альфа-канал):

   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);

Answer 5

Раскрытие: я являюсь автором библиотеки, предложенной ниже.

Если вы хотите использовать библиотеку, а не кодировать ее самостоятельно, библиотека Javascript pusher.color поддерживает преобразование цветов в целое число в 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.

Answer 6

одна строка кода по строке шаблона js :

      let colorStr = `#${(colorNum).toString(16).padStart(6, '0')}`;

Например:

      const colorNum = 0x00f0ff;
const colorStr = `#${(colorNum).toString(16).padStart(6, '0')}`;
console.log(colorStr);
// output: #00f0ff