在javascript中使用逐位>>的颜色提取

Question

为什么我的阿尔法错了？

var d:number = 0xff112233;

var r:number = (d & 0x00ff0000) >> 16;
var g:number = (d & 0x0000ff00) >> 8;
var b:number = d &  0x000000ff;
var a:number = (d & 0xff000000) >> 24 ;
console.log(r,g,b,a);

产出：

17,34,51，-0.00392156862745098

Answer 1

您应该使用的是零填充右移位>>>，而不是>> (签名的右移位)：

var d:number = 0xff112233;

var r:number = (d & 0x00ff0000) >>> 16;
var g:number = (d & 0x0000ff00) >>> 8;
var b:number = d &  0x000000ff;
var a:number = (d & 0xff000000) >>> 24 ;
console.log(r,g,b,a);

你得到了17 34 51 255

使用>>，只有当最重要的位是0时，您才能得到正确的结果。

Answer 2

您可能在Javascript的数字处理中遇到了不准确的地方。

先换档，然后换档：

function extractRGBA(d) {
    var b = d & 0xFF;
    var g = (d >> 8) & 0xFF;
    var r = (d >> 16) & 0xFF;
    var a = (d >> 24) & 0xFF;
    return [r, g, b, a];
}

console.log(extractRGBA(0xff112233));

[17, 34, 51, 255]

Answer 3

解释如下：

http://msdn.microsoft.com/en-us/library/ie/5s9e947e(v=vs.94).aspx

右边的位移位器被丢弃，信号位被添加到左边。