Editing a image in the browser using Javascript then saving the image in Google App Engine

Question

I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.

1. Original image is stored as Blob in DataStore.
2. Image is served (currently) just using
3. Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
4. User can save the image back into the web application.

What is the quickest way to do this?

Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?

Answer 1

Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:

• http://www.w3schools.com/html5/html5_canvas.asp

Depending on your use case you may want to 'underlay' the pixel image to be decorated.

For saving refer to

• http://www.tutorialspoint.com/html5/canvas_states.htm and
• How to save HTML5 canvas?

If the end results shall be pixels, Canvas2Image might by for you.

Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.