Hello yogi108,
I managed to make the "include the image in the JS file" method work using only GIMP and a text editor.
Steps to do so:
1 ) Open the image you want in GIMP. I used this file with transparency via an alpha channel:
- 60x60.png (4.63 KiB) Viewed 6570 times
2 ) Resize the image to the needed size. I used 24x24 px.
3 ) Flip the image vertically
4 ) Go to Color -> Components -> Chanel Mixer... and swap red and blue (set the value for the red channel to 0 red, 0 greed ,100% blue), and for the blue channel the opposite:
5 ) Go to File -> Export As... and select bmp file format, then select this in the advanced options:
- export_bmp.png (8.17 KiB) Viewed 6570 times
6 ) Download and install a Hex Editor. I used XVI32 which is free to download and use and does not require installation.
7 ) Open the BMP file in the hex editor. Bytes 10-13 will show the start position from which the actual pixel data starts.
8 ) Delete the bytes before the first pixel (Ctrl+ Arrows to select, Ctrl-D to delete in XVI32)
9 ) Select all the rest of the bytes - and via Edit -> Clipboad -> Copy as Hex String you can now get those to a text Editor.
10 ) Remove spaces and break the string up in chunks - and you can then insert it in the sample code Ivan added above.
Please note that we flip the image because BMP pixels are listed from bottom to top and we need them in the JS from top to bottom. We then swap the blue and red channels as in our BMP file the colours are ordered ABGR - and we need ARGB order for the JS.
The above image after 7) shows the start of the pixel data - and because my first two pixels are fully transparent - I am checking the data of the third one in Gimp (right side) with the HEX data in the BMP file. Before taking that shot I did one "undo" in GIMP after exporting the bmp - so that I see the natural colours and be able to compare them with the order produced in the BMP.
It is quite a few steps - but it does work. The attachment below includes the data needed to show a 24x24 pixel image in the Editor interface:
- editor_view.png (8.73 KiB) Viewed 6570 times
Regards,
Stefan