JavaScript将RGB整数转换为十六进制

17 浏览
0 Comments

JavaScript将RGB整数转换为十六进制

我正在使用Vivagraph JS库来渲染一些图形。

我想要像这样改变节点的颜色：

nodeUI.color = 0xFFA500FF;

^ 这只是一个随机示例，并不是下面的RGB对应的十六进制值

我从服务器获取的RGB值是一个数组，如下所示：

rgb = [229,64,51]

我该如何将RGB转换为上面提到的十六进制类型的值？

谢谢。

0

1 答案

0 Comments

JavaScript将RGB整数转换为十六进制的问题是因为在代码中，有一个32位的十六进制值0xFFA500FF，其中包含一个alpha通道。忽略alpha通道后，它等同于rgb(255,165,0)。为了解决这个问题，提供了一些函数来进行从32位十六进制到24位RGB和反向转换。

下面是从32位十六进制到RGB转换的函数：

function from32toRGB(v) {
  var rgb = ('0000000' + v.toString(16))
             .slice(-8)
             .match(/../g)
             .splice(0,3)
             .map(function(v) {return parseInt(v,16)});
  return rgb;
}

下面是从RGB到32位十六进制转换的函数：

function fromRGBto32(rgbArr) {
  return rgbArr.reduce(function(s, v) {
    return s + ('0' + v.toString(16)).slice(-2);
  },'') + 'ff'
}

对于函数from32toRGB，可以进行一些测试：

[0xFFA500FF, 0xaec7e8ff,0,0xffffffff].forEach(function(v) {
  document.write(v.toString(16) + ' : ' + from32toRGB(v) + '')
});

对于函数fromRGBto32，也可以进行一些测试：

[[255,165,0],[174,199,232], [0,0,0], [255,255,255]].forEach(function(rgbArr) {
  document.write(rgbArr + ' : ' + fromRGBto32(rgbArr) + '');
});

在代码中，有一个赋值语句：

odeUI.color = 0xFFA500FF

其中的十六进制值0xFFA500FF立即被转换为十进制11454440。如果想要将fromRGBto32的结果转换为可以赋值给odeUI.color的数字，可以使用parseInt：

parseInt(fromRGBto32([229,64,51]), 16);

或者如果想要硬编码，只需要在前面加上'0x'。

如果有一个像'rgb(229,64,51)'这样的字符串，可以通过获取数字、转换为十六进制字符串并进行拼接来将其转换为十六进制值：

var s = 'rgb = [229,64,51]';
var hex = s.match(/\d+/g);
if (hex) {
  hex = hex.reduce(function(acc, value) {
    return acc + ('0' + (+value).toString(16)).slice(-2);
  }, '#')
}
document.write(hex + '');
document.write(parseInt(hex.slice(-6) + 'ff', 16));

以上就是关于JavaScript将RGB整数转换为十六进制的问题出现的原因以及解决方法的整理。

0