假设我有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
方法。
最佳答案
一些数学知识
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% 位算术,因此非常高效。
关于javascript - 从像素的十六进制获取 rgb 值(0..255),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43806195/