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

【问题标题】：How can I render an AppEngine blobstore image on a HTML5 canvas?如何在 HTML5 画布上呈现 AppEngine blobstore 图像？
【发布时间】：2012-04-02 19:42:02
【问题描述】：

我想在 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 上没有服务器端文件，有没有办法做到这一点？

谢谢

莫特

【问题讨论】：

标签： image html google-app-engine canvas

【解决方案1】：

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

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

我们使用 urlRewriteFilter (tukey.org) 将 /image/.png 之类的 url 重写为对 servlet /serve?blobKey= 的调用，以便浏览器知道它们正在获取图像。

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

【讨论】：

【解决方案2】：

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

【讨论】：

非常感谢，尼克。我应该知道，因为我已经在使用 blob 服务器处理程序将 blob 传递给 Picloud。