# HTTP endpoint for image payloads
**URL:** https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598
**Category:** General
**Created:** [13 March 2021 22:13 UTC](https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598 "2021-03-13T22:13:04Z")
**Posts on this page:** 1
**Showing post:** 4
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [14 March 2021 16:26 UTC](https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598/4 "2021-03-14T16:26:41Z")
Hi, firstly, as you are not using dashboard (you are pretty much building a website from endpoints) you have to include html/head/body tags)
Ok, so since this is all client side, you need to post the data back to your 2nd endpoint. for this I simply used `fetch`. Also, as that P5 library generates its results on a canvas, you need to call `.toDataURL()` on the canvas to get the base64 data.
If you want to save this as an actual image, you should convert the base64 to binary. NOTE: Image tools has a `write` function to take the worry out of the format etc.
anyhow, here you go...
The flow...
```auto
[{"id":"1c452e89.35c2d1","type":"http in","z":"47d27633.d3d2a8","name":"","url":"/image_payload","method":"get","upload":false,"swaggerDoc":"","x":130,"y":160,"wires":[["e629870d.aff128"]]},{"id":"27490f43.e6e7c","type":"http response","z":"47d27633.d3d2a8","name":"","statusCode":"","headers":{},"x":540,"y":160,"wires":[]},{"id":"58949c54.02b47c","type":"http in","z":"47d27633.d3d2a8","name":"","url":"/payload_post","method":"post","upload":false,"swaggerDoc":"","x":130,"y":220,"wires":[["6322a969.c2a578"]]},{"id":"35607f02.aeea6","type":"http response","z":"47d27633.d3d2a8","name":"","statusCode":"","headers":{},"x":870,"y":220,"wires":[]},{"id":"c09ff4f1.201d78","type":"image viewer","z":"47d27633.d3d2a8","name":"","width":160,"data":"payload.base64","dataType":"msg","x":490,"y":220,"wires":[["b0736bda.d97868"]]},{"id":"e629870d.aff128","type":"template","z":"47d27633.d3d2a8","name":"remove background","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n \n {{!-- --}}\n \n\n\n\n\n\n \n\n \n\n\n","output":"str","x":350,"y":160,"wires":[["27490f43.e6e7c"]]},{"id":"c494651d.615b38","type":"inject","z":"47d27633.d3d2a8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Pierre-Person.jpg/300px-Pierre-Person.jpg","payloadType":"str","x":120,"y":100,"wires":[["f1ca840f.0f0c88"]]},{"id":"f1ca840f.0f0c88","type":"change","z":"47d27633.d3d2a8","name":"","rules":[{"t":"set","p":"person","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":100,"wires":[[]]},{"id":"6322a969.c2a578","type":"json","z":"47d27633.d3d2a8","name":"","property":"payload","action":"","pretty":false,"x":310,"y":220,"wires":[["3a688b54.e4ec44","c09ff4f1.201d78"]]},{"id":"3a688b54.e4ec44","type":"debug","z":"47d27633.d3d2a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":290,"y":280,"wires":[]},{"id":"b0736bda.d97868","type":"change","z":"47d27633.d3d2a8","name":"","rules":[{"t":"set","p":"statusCode","pt":"msg","to":"200","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":690,"y":220,"wires":[["35607f02.aeea6"]]}]
```
---
_[View the full topic](https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598)._