Drawing and writing on image and save it

Question

I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture. They need to write some text too, and, finally save the result as picture.

Finally, its a simple editor, but I don't find JavaScript library who permit it...

You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg

Answer 1

You can achieve this with the Canvas API pretty easily.

Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).

Finally a canvas can be saved into a png using the toDataURL method.

I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)