Home/ Questions/Q 7725611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:58:54+00:00

I would like to display an AppEngine blobstore PNG image on an HTML5 canvas.

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0