颜色 - 将 rgb 转换为字节数组

Question

我想将颜色代码从 rgb（样本输入为255,255,255 ）转换为字节数组，如[ 0xFF, 0xFF, 0xFF ] 。

我怎样才能正确地做到这一点？

我的第一次尝试是，拆分 RGB 部分并将其解析为十六进制颜色并将其转换为整数：

this.addColor = function addColor(buffer, color) {
    var parts = color.split(',');
    var red = parts[0].toString(16);
    var green = parts[1].toString(16);
    var blue = parts[2].toString(16);

    buffer.writeByte(parseInt("0x" + (red.length == 1 ? "0" + red : red, 16)));
    buffer.writeByte(parseInt("0x" + (green.length == 1 ? "0" + green : green, 16)));
    buffer.writeByte(parseInt("0x" + (blue.length == 1 ? "0" + blue : blue, 16)));
};

原件如下，但我想动态制作：

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(0xFF); // Red
buffer.writeByte(0xFF); // Green
buffer.writeByte(0xFF); // Black

结果将输出为fÿÿÿ ！

Answer 1

由于buffer.writeByte()期望字节值为整数值，因此您只需要将字符串中的值解析为假设为十进制格式的整数。 十六进制在这里不会发挥作用，直到您想稍后使用十六进制格式将字节值表示为字符串。

this.addColor = function addColor(buffer, color) 
{
    var parts = color.split(',');

    for (var i=0; i<parts.length; i++) 
    {
      var itemAsString = parts[i];
      buffer.writeByte(parseInt(itemAsString, 10));
    }
};

---

给出更详细的解释。 您的原始代码

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(0xFF); // Red
buffer.writeByte(0xFF); // Green
buffer.writeByte(0xFF); // Black

也可以写成

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(255); // Red
buffer.writeByte(255); // Green
buffer.writeByte(255); // Black

这在语义上是相同的。 因此，您不需要在任何地方使用十六进制，将字符串解析为整数就足够了。

---

处理多于或少于三个传递的参数的更健壮的版本。

this.addColor = function addColor(buffer, color) 
{
    var parts = color.split(',');

    var maxBytes = Math.min(parts.length, 3);    
    for (var i=0; i < maxBytes; i++) 
    {
      var itemAsString = parts[i];
      buffer.writeByte(parseInt(itemAsString, 10));
    }

    // Write 0 bytes for missing parts
    for (var i=parts.length; i < 3; i++) 
    {
      buffer.writeByte(0);
    }

};

Answer 2

不确定您正在尝试在buffer写入什么，但如果您想简单地将decimal array转换为hex string array ，

你可以试试：

arr.map(n=>'0x' + n.toString(16))

现在， Tour 数组可以来自字符串"255,255,255"通过将其拆分为,或者您需要的任何方式。 如果要从字符串拆分，则需要先解析。 ( parseInt(n).toString(16) ) 剩下你需要根据你的需要来实现。

示例代码：

 var arr = [255, 230, 255]; var hexArr = arr.map(n=>'0x' + n.toString(16)); console.log(hexArr);

Answer 3

这个问题非常令人困惑。 您需要在要涵盖的步骤中更具体地解决问题。 在第一段中，你说你想要一个字节数组作为最终解决方案，但在第二段中你说你想要 RGB 到 HEX，然后到 Integer?。

您发布的输出是：fÿÿÿ。 嗯，要获得此输出，那么您不想将 RGB 转换为 HEX 到整数，而是希望将 RGB 转换为 HEX 到 ASCII (FF=ÿ)。

你可以这样做（它有效，我已经在 jsfiddle 上测试过）：

var parts = color.split(',');
var red = parts[0];
var green = parts[1];
var blue = parts[2];

// converts from integer to hex

var red = "0x"+ tohex(red);
var green = "0x" + tohex(green);
var blue = "0x" + tohex(blue);

// converts form hex to ascii

red = String.fromCharCode(red);
green = String.fromCharCode(green);
blue = String.fromCharCode(blue);                                   
var output= red+green+blue;

// if the input (in this case you name it color) is: 255,255,255 you will get as output: ÿÿÿ

function tohex(rgb) {               
  if (rgb == 0) return "00"; // if the input is "0"
    rgb = rgb.length < 2 ? "0" + rgb : rgb // RGB format validation
    return rgb.toString(16);
} 

这样更简化：

var parts = color.split(',');
var red = parts[0];
var green = parts[1];
var blue = parts[2];

var red = String.fromCharCode("0x"+ tohex(red));
var green = String.fromCharCode("0x" + tohex(green));
var blue = String.fromCharCode ("0x" + tohex(blue));
var output= red+green+blue;

// if the input (in this case you name it color) is: 255,255,255 you will get as output: ÿÿÿ

function tohex(rgb) {               
  if (rgb == 0) return "00"; // if the input is "0"
    rgb = rgb.length < 2 ? "0" + rgb : rgb // RGB format validation
    return rgb.toString(16);
} 

希望能帮助到你！