Using Google Cloud Datastore and AJAX(blobs)-python

Question

Hi I have some images stored as BlobProperty in Google Cloud Datastore. I am trying to load these images via ajax into my template. For eg:- a user has an image and a name. Now the image and name area gets populated via an AJAX get call to the server. I am not understanding how to I send these images to the client , JSON wont support binary data. However googling around tells me of something called base 64.(I am quite new to all this, so let me admit , I am a noob).

Is this the only way to handle this or is there some other better way.

Answer 1

This thread suggests that if you just create an image element, set its src, and add it to your page using Javascript, the browser will take care of making an HTTP request for the image:

http://bytes.com/topic/javascript/answers/472046-using-ajax-xmlhttprequest-load-images

If you do want to do it with 'pure' AJAX, then base64 is probably the best thing: it's a way of encoding binary data (like images) as text, so you can send it as a long string in json.

Answer 2

This is how I do it, it's in flask but nonetheless it's python this way, you create a request handler to display the images.

So all you need to do to get the image via ajax is getting the image id to be served. It's simpler and you can manipulate the size as well on the fly

from flask import request

from google.appengine.api import taskqueue, images, mail
from google.appengine.ext import db

    @app.route('/image/<img_id>')
    def imgshow(img_id):
      imageuse = Image.all().filter("image_id =", img_id).get()
      if imageuse:
        response = Response(response=imageuse.content)
        #you can use any type over here
        response.headers['Content-Type']='image/png'
        return response
      else:
        return

this is what I do to manipulate the size

@app.route('/thumb/<img_id>')
def thumbshow(img_id):
  imageuse = Image.all().filter("image_id =", img_id).get()
  if imageuse:
    thbimg = images.resize(imageuse.content, 80)
    response = Response(thbimg)
    response.headers['Content-Type']='image/png'
    return response
  else:
    return

hope that helps