javascript - 从像素的十六进制获取 rgb 值(0..255)

Question

假设我有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 容器内创建/渲染图像使用 canvas api 中的 putImageData 方法。

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