How to get RGB array from image
About
Accessing RGB data from an image (file/base64/url)
The image is loaded & decoded by a node-red-contrib-image-tools image node then passed to a function node where the pixels are decoded into RGB and return as a flat array (data arranged like: [r,g,b,r,g,b,r,g,b,...] scanned across (x) then down (y))
Screen shot
NOTE
Scanning an image is a slow process. Limit your scan bounds or reduce the input image size to reduce processing time.
[{"id":"bf892437.de0b78","type":"jimp-image","z":"3391e156.d9d19e","name":"","data":"payload","dataType":"msg","ret":"img","parameter1":"img.bmp","parameter1Type":"str","parameter2":"","parameter2Type":"num","parameter3":"","parameter3Type":"num","parameter4":"","parameter4Type":"none","parameter5":"","parameter5Type":"none","parameter6":"","parameter6Type":"none","parameter7":"","parameter7Type":"none","parameter8":"","parameter8Type":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":270,"y":1060,"wires":[["fd49e51.34c2618","729c403b.7dd12"]]},{"id":"d0aa7f27.a3505","type":"inject","z":"3391e156.d9d19e","name":"16x16 pokeball","topic":"pokeball","payload":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACCSURBVDhPrZAJDoAwCAR5Ok/rz6pFFxekxmuTMS3HNFF6EREpqRKqPjihEvntajHDEjuNgtLAHSCx7yfBm2Uwdv8TVBLUZw+4gCUMelWfeqtt+xmPoJ2jkMODOdizjl8eYrsQqKrRWnPyMCcIRliSRRkWBjVeYxGDPife9mAwc07vCzBBNxZvGWrwAAAAAElFTkSuQmCC","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":1060,"wires":[["bf892437.de0b78"]]},{"id":"f75cb931.084e48","type":"debug","z":"3391e156.d9d19e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":790,"y":1120,"wires":[]},{"id":"fd49e51.34c2618","type":"function","z":"3391e156.d9d19e","name":"getRBG from Pixels (sync)","func":"let rgb = []\nlet image = msg.payload;\nfor(let y = 0; y < image.bitmap.height; y++){ \n for(let x = 0; x < image.bitmap.width; x++){\n let color = image.getPixelColor(x, y) ;\n var r = (color >> 24) & 255; \n var g = (color >> 16) & 255; \n var b = (color >> 8) & 255; \n rgb.push(r);\n rgb.push(g);\n rgb.push(b);\n }\n}\n\nmsg.rgb = rgb;\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":1120,"wires":[["6030df32.10d74"]]},{"id":"6030df32.10d74","type":"image viewer","z":"3391e156.d9d19e","name":"","width":"64","data":"payload","dataType":"msg","x":670,"y":1120,"wires":[["f75cb931.084e48"]]},{"id":"729c403b.7dd12","type":"function","z":"3391e156.d9d19e","name":"getRBG from Pixels (async)","func":"\nvar image = msg.payload;\nvar rgb = [];\nimage.scan(0, 0, image.bitmap.width, image.bitmap.height, function(x, y, idx) {\n // x, y is the position of this pixel on the image\n // idx is the position start position of this rgba tuple in the bitmap Buffer\n \n var r = this.bitmap.data[idx + 0];\n var g = this.bitmap.data[idx + 1];\n var b = this.bitmap.data[idx + 2];\n var a = this.bitmap.data[idx + 3];\n rgb.push(r);\n rgb.push(g);\n rgb.push(b); \n if (x >= image.bitmap.width - 1 && y >= image.bitmap.height - 1) {\n // image scan finished, do your stuff\n node.send({topic:\"rgb\",payload: rgb})\n }\n});\n","outputs":1,"noerr":0,"x":480,"y":1000,"wires":[["4fefbcbb.366634"]]},{"id":"4fefbcbb.366634","type":"debug","z":"3391e156.d9d19e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":790,"y":1000,"wires":[]},{"id":"89714368.7bd14","type":"comment","z":"3391e156.d9d19e","name":"To load a file chage the inject to send filename","info":"","x":210,"y":940,"wires":[]},{"id":"813c108f.c3dc5","type":"comment","z":"3391e156.d9d19e","name":"RGB Data will be in msg.payload","info":"","x":870,"y":1040,"wires":[]},{"id":"7da840ec.4c85d","type":"comment","z":"3391e156.d9d19e","name":"RGB Data will be in msg.rgb","info":"","x":860,"y":1160,"wires":[]}]
