Question

我想在HTML5画布上显示AppEngine blobstore PNG图像。这是我到目前为止所尝试的，基于HTML5教程并使用webapp模板将PNG图像及其尺寸传递给客户端：

<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>

声明

img.src = png

我猜错了，因为JavaScript Image对象的SRC属性必须是服务器端文件名。但App Engine上没有服务器端文件，有没有办法做到这一点？

由于

莫特

Answer 1

图像来自blobstore，使用servlet（或python中的等价物）作为字节数组。由您编写代码以便以他们理解的方式将其写回客户端。在java中，它通常看起来像这样：

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

我们使用urlRewriteFilter（tuckey.org）将像/image/.png这样的网址重写为对servlet / serve的调用？blobKey =所以浏览器知道他们正在获取图像。

请参阅：https://developers.google.com/appengine/docs/java/javadoc/com/google/appengine/api/blobstore/BlobstoreService

Answer 2

您需要编写一个处理程序来提供blob like this，然后在HTML和javascript中使用该处理程序的URL。或者，由于您正在提供图像，因此您可以使用Google的高性能图像服务提供图像，如文档here所示，并使用该网址。

如何在HTML5画布上呈现AppEngine blobstore图像？

2 个答案: