Using the Images Python API

Introduction

The Images API enables you to perform common transforms on images like resizing, rotating and adjusting their color and contrast. These transforms generally happen in the context of a user uploaded image or photo. This document describes the process of uploading, transforming, storing and serving images dynamically. We'll use the Guestbook example from the getting started guide and modify it to let a user upload an avatar with their greeting.

Creating an Image Property

The first thing we need to do is update the model from the guestbook sample to store the uploaded image as a blob.

class Greeting(ndb.Model):
    """Models a Guestbook entry with an author, content, avatar, and date."""
    author = ndb.StringProperty()
    content = ndb.TextProperty()
    avatar = ndb.BlobProperty()
    date = ndb.DateTimeProperty(auto_now_add=True)

Uploading User Images

Next we'll modify the form to add another field that enables the user to select a file from their computer to upload. We'll also have to add the enctype attribute to the form tag to specify that we want this to be a multi-part form post.

self.response.out.write("""
      <form action="/sign?%s"
            enctype="multipart/form-data"
            method="post">
        <div>
          <textarea name="content" rows="3" cols="60"></textarea>
        </div>
        <div><label>Avatar:</label></div>
        <div><input type="file" name="img"/></div>
        <div><input type="submit" value="Sign Guestbook"></div>
      </form>
      <hr>
      <form>Guestbook name: <input value="%s" name="guestbook_name">
      <input type="submit" value="switch"></form>
    </body>
  </html>""" % (urllib.urlencode({'guestbook_name': guestbook_name}),
                cgi.escape(guestbook_name)))

This should give us a simple form with two fields.

At this point we are also going to want to update the Guestbook handler to get the image data from the form post and store it as a Blob in the datastore.

class Guestbook(webapp2.RequestHandler):
    def post(self):
        guestbook_name = self.request.get('guestbook_name')
        greeting = Greeting(parent=guestbook_key(guestbook_name))

        if users.get_current_user():
            greeting.author = users.get_current_user().nickname()

        greeting.content = self.request.get('content')

        avatar = self.request.get('img')
        avatar = images.resize(avatar, 32, 32)
        greeting.avatar = avatar
        greeting.put()

        self.redirect('/?' + urllib.urlencode(
            {'guestbook_name': guestbook_name}))

Transforming Images

For the Guestbook application we are going to create 32x32 avatars. First we have to import the google.appengine.api.images module. Then all we have to do is call the resize function and pass in the image data.

from google.appengine.api import images

avatar = images.resize(avatar, 32, 32)

Dynamically serving images

Finally we have to create a Image handler that will dynamically serve these images off the /img path. We'll also update the HTML to pull in these dynamically served images.

class Image(webapp2.RequestHandler):
    def get(self):
        greeting_key = ndb.Key(urlsafe=self.request.get('img_id'))
        greeting = greeting_key.get()
        if greeting.avatar:
            self.response.headers['Content-Type'] = 'image/png'
            self.response.out.write(greeting.avatar)
        else:
            self.response.out.write('No image')

In the Image Handler we get the img_id from the request. We'll need to update the HTML of the Guestbook to pass the key of the greeting to the Image handler

self.response.out.write('<div><img src="/img?img_id=%s"></img>' %
                        greeting.key.urlsafe())
self.response.out.write('<blockquote>%s</blockquote></div>' %
                        cgi.escape(greeting.content))

Deploying the app to App Engine

To upload the guestbook app, run the following command from within the guestbook directory of your application where the app.yaml and index.yaml files are located:

gcloud app deploy app.yaml index.yaml

The Datastore indexes might take some time to generate before your application is available. If the indexes are still in the process of being generated, you will receive a NeedIndexError message when accessing your app. This error is transient, so try a little later if at first you receive this error.

To learn more about deploying your app from the command line, see Deploying A Python App.

Viewing your deployed application

To launch your browser and view the app at http://[YOUR_PROJECT_ID].appspot.com, run the following command:

gcloud app browse