Clever Geek Handbook

How can I render the blobstore AppEngine image on HTML5 canvas?

I would like to display a PNG AppEngine blobstore image on an HTML5 canvas. This is what I have tried so far, based on the HTML5 tutorials and using the 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>

Statement

img.src = png

I think this is wrong because the SRC attribute of the JavaScript Image must be the file name on the server side. But there are no server side files in App Engine, so is there a way to do this?

thank

Mort

+3


source to share


2 answers


You need to write a handler to serve blobs like this and then use the URL of that handler in your HTML and javascript. Alternatively, since you are serving images, you can serve the image using a high quality Google image as described here , and use that URL instead.



+1


source


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

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


Are we using urlRewriteFilter (tuckey.org) to rewrite urls like /image/.png to a servlet / service call? blobKey = so browsers know they are fetching an image.

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

+2


source






More articles:


All Articles