Why is there bit shifting when converting to an image from an array?

Question

I'm trying to create a QPixmap from a numpy array. The numpy array image is going to be 2D (ie no color info just grayscale).

I'm trying to adapt this answer to my needs however I don't quite understand this line:

b = (255 << 24 | a[:,:,0] << 16 | a[:,:,1] << 8 | a[:,:,2]).flatten() # pack RGB values

There is some bitshifting going on and some bitwise or' ing but I don't quite get it to be honest.

So my dumbed down example is as follows:

x, y = np.meshgrid(np.arange(1920), np.arange(1080), indexing='ij'); z = np.sin(0.03*x)*np.cos(0.005*y)
imgPNFN = z
if imgPNFN.ndim == 2:
    imgPNFN = imgPNFN[:,:,np.newaxis].repeat(3, 2)
imMin = np.min(imgPNFN)
imDelta = np.max(imgPNFN) - np.min(imgPNFN)
im1 = ((imgPNFN-imMin)/imDelta*255).astype(np.uint32)+1 #<-- had to add 1 for some reason otherwise got weird results...
im2 = 255 << 24 | im1[:,:,0] << 16 | im1[:,:,1] << 8 | im1[:,:,2]
im3 = QtGui.QImage(im2, im2.shape[1], im2.shape[0], QtGui.QImage.Format_RGB32)

which seems to work but when my image is lena ie:

from scipy.misc import lena
l = sp.misc.lena()
imgPNFN = l
#etc...

It doesn't work... I think it's because of my lack of understanding of what the bitshifting is doing... Also, if there is a better way to do the RGB (ie I'm copying things over to pretend I have the same values) if I could avoid that somehow that would be great.

Thanks in advance!

Mr. Polywhirl · Accepted Answer · 2015-01-10T04:14:03.747

I assume that you want to know why the bit-shifting and or-ing is happening. Well, you need to join the A[lpha], R[ed], G[reen], and B[lue] bytes together to form a single integer value. Pixel data is a 2D array of integer; scalar value. They are not tuples of bytes.

enter image description here

Example

Color: Periwinkle

A: 255 -> 11111111
R: 204 -> 11001100
G: 204 -> 11001100
B: 255 -> 11111111

Formula

Value = A << 24 | R << 16 | G << 8 | B

Bit-Math

  11111111000000000000000000000000
          110011000000000000000000
                  1100110000000000
 +                        11111111
 ---------------------------------
  11111111110011001100110011111111

Base conversion

11111111110011001100110011111111₂ = 4291611903₁₀

Finally

Based on the bit manipulation above, the color Periwinkle, with 100% opacity in ARGB, has a pixel value of 4,291,611,903.