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

Question

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

• The original image is saved as a Blob in the DataStore.
• Image is being served (currently) only with
• Currently, the user can only view the image, but I want the user to be able to edit images (adding text and lines no more, without the need for complex conversion).
• The user can save the image back to the web application.

What is the fastest way to do this?

Will it be easy to integrate with third-party javascript image libraries (which already have editing tools)?

Answer 1

Your starting point (and minimum requirement) for linear art (reading: not pixels, but as you say: text and lines) will be an HTML5 Canvas object:

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

Depending on your use case, you may want to “frame” the image with the image to be decorated.

Refer to

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

, Canvas2Image .

, , . , .