獲取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）

回答

相關問題