CODEWITHSUNDEEP
imagehtmlgoogle-app-enginecanvas
MortCanty
MortCanty

Reputation: 417

How can I render an AppEngine blobstore image on a HTML5 canvas?

I would like to display an AppEngine blobstore PNG image on an HTML5 canvas. This is what I've tried so far, based on the HTML5 Tutorials and using a webapp template to pass the PNG image and its dimensions to the client:

<html>
  <head>
    <script type="text/javascript">
      function draw(png) {
         var ctx = document.getElementById('image').getContext('2d');
         var img = new Image();
         img.onload = function(){
            ctx.drawImage(img,0,0)
         };
         img.src = png;
      }   
    </script>   
  </head>
  <body onload="draw({{png}});">
 <canvas id="image" width={{width}} height={{height}}></canvas>       
  </body>
</html>

The statement

img.src = png

I guess is wrong because the SRC attribute of a JavaScript Image object has to be a server-side filename. But there are no server-side files on the App Engine, so is there a way to do this?

Thanks

Mort

Upvotes: 3

Views: 629

Answers (2)

Nick Johnson
Nick Johnson

Reputation: 101149

You need to write a handler to serve up blobs, like this, then use the URL to that handler in your HTML and javascript. Alternately, since you're serving images, you can serve the image using Google's high performance image serving, as documented here, and use that URL instead.

Upvotes: 1

Rick Mangi
Rick Mangi

Reputation: 3769

Images come out of the blobstore using a servlet (or equivalent in python) as a byte array. It's up to you to write code to write that back to the client in a way that they understand. In java it usually looks like this:

BlobKey blobKey = new BlobKey(req.getParameter("blobkey")); 
blobstoreService.serve(blobKey, resp);

We use urlRewriteFilter (tuckey.org) to rewrite urls like /image/.png to a call to a servlet /serve?blobKey= so browsers know that they're fetching an image.

See: https://developers.google.com/appengine/docs/java/javadoc/com/google/appengine/api/blobstore/BlobstoreService

Upvotes: 2

Related Questions