Lines over a picture (edit picture)

General
1

I would like to draw some lines over a picture.

Something like canvas in HTML:
ctx.moveTo (x0, y0);
ctx.lineTo (x1, y1);
ctx.lineTo (x2, y2);
ctx.lineTo (x3, y3);
ctx.moveTo (x0, y0);
ctx.fill ();

Is it possible using node-red?

2

Yes - see the awesome https://flows.nodered.org/node/node-red-contrib-image-tools

1 Like
3

I knew about image-tools, but I still couldn't figure out how to draw lines after coordinates.

4

Here is something to get you started...

image

[{"id":"fe0723fa.9f884","type":"inject","z":"45e696b4.b511b8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":940,"y":520,"wires":[["517b20ef.c1f4e"]]},{"id":"517b20ef.c1f4e","type":"jimp-image","z":"45e696b4.b511b8","name":"","data":"{\"w\": 100, \"h\": 100, \"background\": \"red\"}","dataType":"json","ret":"img","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","sendProperty":"payload","sendPropertyType":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":1080,"y":520,"wires":[["42640fb9.ec538"]]},{"id":"edcb513f.9d995","type":"image viewer","z":"45e696b4.b511b8","name":"","width":"152","data":"payload","dataType":"msg","x":1090,"y":580,"wires":[[]]},{"id":"42640fb9.ec538","type":"function","z":"45e696b4.b511b8","name":"draw","func":"var img = msg.payload;\nvar fillColor = 0x00FF00FF;//green\nvar lineColor = 0;\nconst white = 0xFFFFFFFF;//white\nconst black = 0x000000FF;//black\n\nfunction iterator(x, y, offset) { \n    this.bitmap.data.writeUInt32BE(lineColor, offset, true); \n}\n\n\n//line 1\nlineColor = black;\nimg.scan(25, 15, 50, 2, iterator);//draw line across top\n\n//line 2\nlineColor = white;\nimg.scan(50, 5, 1, 90, iterator);//draw line down middle\n\n\n//line 1\nlineColor = 0x0000FFFF;//blue\nimg.scan(5, 10, 50, 2, iterator);//draw line x5,y10,w50,h2\n\n//line 2\nlineColor = 0xFF00FFFF;//purple\nimg.scan(5, 10, 2, 20, iterator);//draw line x5,y10,w2,h20\n\n\n\n// fill x, y, w, h\nimg.scan(20, 20, 20, 20, function (x, y, offset) {\n     this.bitmap.data.writeUInt32BE(fillColor, offset, true);\n});\n\n\n\nreturn msg;","outputs":1,"noerr":0,"x":930,"y":580,"wires":[["edcb513f.9d995"]]}]
2 Likes
5

About :

 img.scan(20, 20, 20, 20, function (x, y, offset) {
     this.bitmap.data.writeUInt32BE(fillColor, offset, true);
});

Can a fill be made for an irregular surface, consisting of several x and y coordinates ?
In other words, I draw several lines that form a fenced outline, which will be filled inside with a color.

6

Just re-arrange the functions / change the values.

I put comments and examples in the function node so you can figure it out.

Give it a go & come back with your workings if you get stuck.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.