获取RGB值（0..255）

让说，我有0x757575这是一个像素中包含8位的红，绿各红色，绿色和蓝色，然后我如何提取价值HEX值和蓝色分别在JavaScript中？获取RGB值（0..255）

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,......]从图像像素的名单，我想创建/使用呈现从画布API putImageData的方法画布容器内的图像。

来源

2017-05-05 Norlihazmey Ghazali

一些位数学

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

来源

2017-05-05 13:37:53 James

酷..你能解释我律位 –

'0x750000 >> 16 '为什么16？ –

在十六进制，每个数位保持四个比特。我们有四个数字（零点）移位，所以4比特乘以4位= 16位。类似地，当有2个0到移位，这是8个比特。 – James

您可以从十六进制转换为使用下面的函数为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

来源

2017-05-05 13:36:47

我不能传递字符串作为hexToRgb参数 –

使用本：

 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

来源

2017-05-05 13:42:10 Yuvals

完美的作品，你能解释一下我的理解 –

'a >> b'将'a'移到右边的'b'位和'＆255'屏蔽，将占用最后2个字节移动。因此，每一行16/8/0会给你r/g/b的相关字节 – Yuvals

好吧，谢谢Yuvals的回答。值得赞赏的是，从现在开始对我来说将是一个参考 –

获取RGB值（0..255）

回答

相关问题