Wie kann ich ein AppEngine-Blobstore-Bild auf einem HTML5-Zeichenbereich rendern?

Ich möchte ein AppEngine Blobstore PNG-Bild auf einem HTML5-Canvas anzeigen. Dies ist, was ich bisher versucht, basierend auf den HTML5-Tutorials und mit einer Webapp Vorlage, um die PNG-Bild und seine Dimensionen an den Kunden weitergeben müssen:Wie kann ich ein AppEngine-Blobstore-Bild auf einem HTML5-Zeichenbereich rendern?

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

Die Aussage

img.src = png

Ich denke, ist falsch, da das SRC-Attribut eines JavaScript-Image-Objekts ein serverseitiger Dateiname sein muss. Aber es gibt keine serverseitigen Dateien in der App Engine. Gibt es dafür eine Möglichkeit?

Dank

Mort

Quelle

2012-04-01 MortCanty

Sie benötigen einen Handler schreiben Blobs servieren, like this, dann die URL in Ihren HTML und JavaScript zu diesem Handler verwenden. Alternativ können Sie, da Sie Bilder bereitstellen, das Bild mithilfe der leistungsfähigen Bildausgabe von Google bereitstellen, wie in der Dokumentation here dokumentiert, und stattdessen diese URL verwenden.

Quelle

2012-04-02 11:42:02

Vielen Dank, Nick. Ich hätte es wissen müssen, da ich bereits einen Blob-Server-Handler verwende, um Blobs an Picloud zu übergeben. – MortCanty

Bilder kommen aus dem Blobstore ein Servlet (oder gleichwertig in Python) als ein Byte-Array. Es liegt an Ihnen, Code zu schreiben, um den Client so zu schreiben, dass sie ihn verstehen. In Java sieht es in der Regel wie folgt aus:

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

Wir verwenden urlRewriteFilter (tuckey.org) Urls zu umschreiben wie /image/.png zu einem Aufruf an ein Servlet/dienen blobKey = so Browser wissen, dass sie sind? ein Bild holen.

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

Quelle

2012-04-01 18:48:46

Wie kann ich ein AppEngine-Blobstore-Bild auf einem HTML5-Zeichenbereich rendern?

Antwort

Verwandte Themen