Question

假设我有0x757575这是HEX中一个像素的值，每个红色，绿色和蓝色包含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方法在canvas容器中创建/渲染图像。 / p>

Answer 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

Answer 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

Answer 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

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

3 个答案: