# Overlay text onto image

**URL:** <https://discourse.nodered.org/t/overlay-text-onto-image/16011>\
**Category:** General\
**Created:** [27 September 2019 19:02 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011 "2019-09-27T19:02:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![m\_elias](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@m\_elias](https://discourse.nodered.org/u/m_elias)\
**Post date:** [27 September 2019 19:02 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/1 "2019-09-27T19:02:23Z")

</div>

I've been unable to find any examples online of how to overlay text onto an image. I'm using a http request node to return a binary buffer from an IP camera. Then I'm formatting the date/time (contrib-moment), setting the filename with a function node and saving the image to a file. Everything works up to this point except I have no idea how to overlay text (context variable) onto the image. Using contrib-image-output for image preview in the flow.

```auto
[{"id":"87992f39.32ee1","type":"debug","z":"893c9b3d.b9d948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1070,"y":1120,"wires":[]},{"id":"904a0281.60513","type":"http request","z":"893c9b3d.b9d948","name":"camera image request","method":"GET","ret":"bin","paytoqs":false,"url":"http://192.168.x.x:x/image/camera_name?q=30&s=100","tls":"","proxy":"","authType":"","x":320,"y":1120,"wires":[["483ba9d5.15ef78","bc26f5c4.945308"]]},{"id":"11c9e109.5e81df","type":"inject","z":"893c9b3d.b9d948","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":1120,"wires":[["904a0281.60513"]]},{"id":"483ba9d5.15ef78","type":"image","z":"893c9b3d.b9d948","name":"","width":160,"x":540,"y":1160,"wires":[]},{"id":"bec0423d.2cbd1","type":"file","z":"893c9b3d.b9d948","name":"","filename":"","appendNewline":false,"createDir":true,"overwriteFile":"true","encoding":"none","x":930,"y":1120,"wires":[["87992f39.32ee1"]]},{"id":"be49f715.643c58","type":"function","z":"893c9b3d.b9d948","name":"set filename","func":"msg.filename = \"/home/user/images/\" + msg.datetimeFormatted + \" \" + flow.get('scale').pounds + \".jpg\";\nreturn msg;","outputs":1,"noerr":0,"x":770,"y":1120,"wires":[["bec0423d.2cbd1"]]},{"id":"bc26f5c4.945308","type":"moment","z":"893c9b3d.b9d948","name":"","topic":"","input":"headers.date","inputType":"msg","inTz":"Etc/GMT-0","adjAmount":0,"adjType":"days","adjDir":"add","format":"YYYYMMDD hhmmss","locale":"C","output":"datetimeFormatted","outputType":"msg","outTz":"America/Winnipeg","x":560,"y":1120,"wires":[["be49f715.643c58"]],"info":"tried to find the timezone code for 0\nhttps://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json\nand convert to local"}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 September 2019 19:27 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/2 "2019-09-27T19:27:23Z")

</div>

Check the printing text example gif example on here...

> **[node-red-contrib-image-tools](https://www.npmjs.com/package/node-red-contrib-image-tools)**
>
> A node-red node to manipulate images with the jimp library and decode barcodes with zxing

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 September 2019 20:16 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/3 "2019-09-27T20:16:54Z")

</div>

Forgot to mention, once installed, there is a demo flow in the importable examples that does just this.

---

<div class="post-metadata">

**Author:** ![m\_elias](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@m\_elias](https://discourse.nodered.org/u/m_elias)\
**Post date:** [27 September 2019 21:13 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/4 "2019-09-27T21:13:26Z")

</div>

Thanks, looks like that should do it.

---

<div class="post-metadata">

**Author:** ![nenadvkc](https://avatars.discourse-cdn.com/v4/letter/n/90ced4/32.png) [@nenadvkc](https://discourse.nodered.org/u/nenadvkc)\
**Post date:** [22 July 2020 11:03 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/6 "2020-07-22T11:03:03Z")

</div>

> [@nenadvkc](#):
>
> ged

Very powerful image toolset, is there any plans on TIFF support? Thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 July 2020 12:12 UTC](https://discourse.nodered.org/t/overlay-text-onto-image/16011/7 "2020-07-22T12:12:22Z")

</div>

You can load & modify and save TIFFs already.

There is an issue with the built in viewer (for viewing inside the node-red editor )- otherwise, everything else works.

EIDT: multi image TIFFs will either not work or you will get 1st image (haven't tested)