Use BlobstoreService and ImageService to upload/serve images drawn from an HTML5 canvas

Question

I'm working on an Appengine application in Java that allows users to upload images drawn through an HTML5 canvas library called PaintWeb (http://code.google.com/p/paintweb/).

Currently I have a servlet that receives the XMLHttpRequest POST from the paintweb javascript library as a formencoded image.

1. Paintweb.js library sends XMLHttpRequest POST

     send       = 'dataURL=' + encodeURIComponent(ev.dataURL), 
     headers    = {'Content-Type': 'application/x-www-form-urlencoded'}; 
   

2. A custom servlet decodes the form encoded image data as a blob and stores that in the Datastore with an associated Drawing entity

3. Custom servlet serves the Blob's in the datastore as ContentType("image/png") I'm curious if I can use the new BlobstoreService and ImageService features to upload my HTML5 canvas images and serve them as pure Blobs (as shown in this tutorial GWT BlobstoreService and ImageService)

According to the documentation (http://code.google.com/appengine/docs/java/blobstore/overview.html#Uploading_a_Blob) it seems like the major stopping point is that I need to POST a form with:

 <input type="file" name="myFile"> 

Which I don't think is possible from Paintweb. Possibly a work around would be if there was some way on the server side to store a blob in the Blobstorage (instead of the datastore) so that you could reap the benefits of not using your CPU quota to serve images.

Is it possible or even a good idea to use the Appengine URL Fetch service and forward the image blob upload to the Blobstorage "createUploadURL()" from the server side.

http://code.google.com/appengine/docs/java/urlfetch/usingjavanet.html

It seems like it could be possible, but not sure it would save me resources in the long run (the images are simple small drawings that could be viewed many many more times than the upload time so I feel like I'd get benefit storing/serving from the BlobstoreService.

Answer 1

Your best option here would be to use an XMLHTTPRequest, with a multipart/form-data encoded body containing the created image. This can be built to match what the blobstore expects. The procedure to follow would go something like this:

1. Make a call to a JSON API that returns a new blobstore upload URL
2. Construct a MIME message containing the image data as one part, along with any other fields you want to include.
3. Use XMLHTTPRequest to upload the form to the blobstore.

In order to do this, you'll need to build the mime message yourself, or find a Javascript library to do it for you.