How to save HTML5 canvas image to Google App Engine

This is a very specific problem and not many would have it. But I had to implement it and came up with a solution that works for me. This is how I did it for 3DTin.

First why it's specific. In a typical case a web app wants to save user submitted images to Google app engine data store. This can be simply done by presenting user with a form and adding an 'input' tag with type 'file'. The submitted image can be extracted in GAE using request.get() and packaged into db.Blob to eventually store into BlobProperty. I am not going to explain this typical case, because it's covered nicely in the GAE's documentation. However, the process is not as straightforward when the image you want to store is not an image file on user's computer, but a dump of HTML5 canvas element in the web app.

An HTML5 canvas element lets you export its content as jpeg or png image with the toDataURL API. This function returns a data URL that contains base64 encoded jpeg/png image. So how do we convert this image data into GAE's db.Blob object?

The solution is to send the base64 encoded data as POST param to GAE app, do some regex matching to extract the exact portion of the data URL that is the encoded image and pass it through the base64 decoder (which is part of standard python library).

Here is client side:


Here is server side code:


Code is also accessible as gist here, in case you can't see the embedded version above.

This code works in 3DTin where a thumbnail of user's canvas is sent to GAE app for storage. It works without problem.

Ads:

Debian repository on Google App Engine

So here is the post about the eureka moment I promised on Twitter.

Last week before releasing Inkface v0.1.2 and twitter-inkface client, I was working on submitting the packages in maemo-extras-devel repo. I was following a long list of instructions. Halfway through the list, I noticed that the example package is assumed to have had autotools kind of build framework. One of my packages uses SCons. I had a doubt (yet unconfirmed) that it won't work. So I scratched my head and that brought to the surface one of the ideas I have had at the back of my mind for a long time. Using one of these "cloud" services to host a debian repo.

And what cloud service can be better than the one that is absolutely free (for such a low traffic purpose, at least) - Google App Engine. So I went through the basics of Debian repo and put together an app for Google App engine. Under couple of hours, I had my very own Debian repo. (Yeah, that's when I leapt out of my bathtub and ran to twit 'Eureka Eureka!') That's what you hit when you point your apt-get to repo.altcanvas.com.

I have submitted the small script as a recipe in Google App Engine cookbook. You can also find it in altcanvas source tree.