Edit picture on the web and export as image

Question

Hey I wonder where can I find a tool to edit image online. I want to create a tool that I give some text & an image which will write it(the text) on a specific place in the image, and allow for saving or exporting the result as jpg or png.

Maybe take a look at `canvas`? For example `toDataURL('image/png')`. — John, Apr 05 '16 at 13:42
Welcome on StackOverflow. Have a look at http://stackoverflow.com/help/how-to-ask. Questions about tools and software for a specific purpose are off-topic here. However, I won't flag it because @John mentioned a native solution to your problem. Have a good stay with us ! — Apolo, Apr 05 '16 at 14:19

score 1 · Answer 1 · edited May 23 '17 at 12:31

The accepted answer for Put text on an image and save as image explains how to do this:

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);

     // open the image in a new browser tab
     // the user can right-click and save that image
     var win=window.open();
     win.document.write("<img src='"+canvas.toDataURL()+"'/>");    

 };
 imageObj.src = "mail-image.jpg"; 
};

You can learn more about canvas here

Edit picture on the web and export as image

1 Answers1