Saving Images with HTML5 Canvas and App Engine’s Blobstore API
So while we’re busy making the best hands-free, sound-activated drawing tool ever we figured saving your creations to share with your friends would be pretty important. I took some time yesterday morning to set our App Engine instance up with some image saving capabilites which I’ll share in this post. We’re doing some cool stuff here like sending an encoded image from an HTML5 canvas cross-domain and then saving it to the App Engine Blobstore (an experimental feature).
Let’s start with our face drawing tool. The high-level mechanics of the tool are quite simple: we take data from the Hangouts API about face position and apply that data to a HTML5 ‹canvas› element about five times a second. You can draw to your heart’s content but that data will never get saved unless we do something about it. So here’s what we did about it: Once a drawing is complete, we stop the canvas from updating and save it with the native toDataUrl() method. Finally, we send it off to our Google App Engine instance for safe keeping.
What’s happening on our App Engine instance is a little more interesting. We use the Blobstore API, which allows us to create and serve data objects, called blobs. The Blobstore creates a blob from a file’s contents and returns a reference to the blob, called a blob_key, which can be used to serve the blob. Check out the UploadHandler class in the code snippet below, this is where everything gets blobby.
I hope this sheds some light on how to use base64 data from a canvas and save it to an App Engine instance. All in all, I found the Blobstore API pretty easy to work with once I understood what was going on conceptually and technically. Its flexibility is pretty cool and could address a bunch of usecases, including drawing with your face.
Jonathan Vingiano — @jgv