从像素的十六进制获取 rgb 值（0..255）答案

【问题标题】：Get rgb value(0..255) from pixel's HEX从像素的十六进制获取 rgb 值（0..255）
【发布时间】：2017-05-05 13:26:19
【问题描述】：

假设我有0x757575，它是十六进制中一个像素的值，其中每个红色、绿色和蓝色包含 8 位，那么我如何在 javascript 中分别提取红色、绿色和蓝色的值？

var pixel = 0x757575;
// do i need to split it up into two character each [75,75,75]
// if i do as above, did it already become decimal

我的用例是，我已经从数组容器 [757575, 080808,......] 中的图像中获得了像素列表，并且我想使用来自 canvas api 的 putImageData 的方法在画布容器内创建/渲染图像。

【问题讨论】：

标签： javascript hex

【解决方案1】：

一些数学运算

var pixel = 0x757575;
var red = (pixel & 0xFF0000) >> 16;
var green = (pixel & 0x00FF00) >> 8;
var blue = (pixel & 0x0000FF);
alert(red + "," + green + "," + blue);

对于红色值，我们使用位掩码只产生像素值的高两个十六进制值，然后将结果向右移动 16 位，所以在我们的例子中

0x757575 & 0xFF0000 = 0x750000
0x750000 >> 16 = 0x75 (= 117 in decimal)

绿色类似，我们丢弃除中间 2 个十六进制值之外的所有内容，并将结果向右移动 8 位

0x757575 & 0x00FF00 = 0x007500
0x007500 >> 8 = 0x75

蓝色只是被屏蔽的最后 2 位，不需要移位。

由于该技术使用 100% 位运算，因此非常有效。

资源：MDN - Bitwise Operators

【讨论】：

酷！.. 你能解释一下吗
0x750000 >> 16 为什么是 16？
在十六进制中，每个数字包含四位。我们有四位数字（零）要移位，所以 4 位乘以 4 位 = 16 位。同样，当有 2 个零要移位时，就是 8 位。
啊哈，明白了。谢谢詹姆斯。需要深入了解这一点

【解决方案2】：

您可以使用以下函数将十六进制转换为 rgb -

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

hexToRgb("#757575").r 输出117

【讨论】：

我无法将字符串作为参数传递给 hexToRgb

【解决方案3】：

使用这个：

      function hex2Rgb(hex) {
      var toInt = parseInt(hex, 16);
      var r = (toInt >> 16) & 255;
      var g = (toInt >> 8) & 255;
      var b = toInt & 255;

      return `rgb(${r},${g},${b})`;
  }

  var rgb = hex2Rgb('0x757575');

plunker link

【讨论】：

完美运行，你能解释一下我的理解吗
a >>b 将a 向右移动b 位和&255 掩码，将采用最后2 个字节的移位。因此，16/8/0 的每一行都会为您提供 r/g/b 的相关字节
好的，感谢 Yuvals 的回答。很感激，从现在开始将为我提供参考