Uploading 'canvas' image data to the server

Question

I need to upload the canvas image data to the server (database) on the fly, i.e., I need to create a form and with an input=file, and post the image data without any user interaction.

Answer 1

FWIW, this is how I got it working.

My server is in google app engine. I send canvas.toDataURL()'s output as part of post request using jQuery.post. The data URL is base64 encoded image data. So on server I decode it and convert it to image

import re  import base64 class TnUploadHandler(webapp.RequestHandler):     dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')     def post(self):         uid = self.request.get('uid')         img = self.request.get('img')          imgb64 = self.dataUrlPattern.match(img).group(2)         if imgb64 is not None and len(imgb64) > 0:             thumbnail = Thumbnail(                     uid = uid, img = db.Blob(base64.b64decode(imgb64)))             thumbnail.put() 

From client I send the data like this:

$.post('/upload',         {             uid : uid,             img : canvas.toDataURL('image/jpeg')         },         function(data) {}); 

This may not be the best way to do it, but it works.