Ejemplos de la API Images

ID de región

El REGION_ID es un código abreviado que Google asigna en función de la región que selecciones al crear tu aplicación. El código no corresponde a un país o provincia, aunque algunos IDs de región pueden parecerse a los códigos de país y provincia que se usan habitualmente. En las aplicaciones creadas después de febrero del 2020, REGION_ID.r se incluye en las URLs de App Engine. En las aplicaciones creadas antes de esa fecha, el ID de región es opcional en la URL.

Más información sobre los IDs de región

Consulta cómo subir, transformar, almacenar y publicar imágenes de forma dinámica con la API Images. En este ejemplo se describe cómo publicar mensajes en un tablón de anuncios público y subir un avatar con tu saludo.

Crear un modelo de imagen en Datastore

Debes actualizar el modelo del ejemplo del libro de visitas para almacenar la imagen subida como un 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)

Subir imágenes de usuarios

Deberá modificar el formulario HTML para permitir que el usuario suba una imagen:

  1. Añade un campo que permita al usuario seleccionar un archivo de su ordenador para subirlo.

  2. Añade el atributo enctype a la etiqueta del formulario y especifica que se trata de un envío de formulario multiparte.

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

  3. Actualiza el controlador Guestbook para obtener los datos de la imagen del formulario y almacenarlos como un blob en el almacén de datos.

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

Transformar imágenes

Para crear avatares de 32x32, debes hacer lo siguiente:

  1. Importa el módulo google.appengine.api.images.

    from google.appengine.api import images

  2. Llama a la función resize y transfiere los datos de la imagen.

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

Presentación de imágenes de forma dinámica

Para publicar imágenes, debes hacer lo siguiente:

  1. Crea un controlador de imágenes que sirva imágenes de forma dinámica desde la ruta /img.

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

  2. Actualiza el HTML para mostrar estas imágenes servidas de forma dinámica.

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

Deberás actualizar el HTML del libro de visitas para transferir la clave del saludo al controlador de imágenes, ya que obtiene el img_id de la solicitud.

Desplegar la aplicación en App Engine

Para subir la aplicación Guestbook, ejecuta el siguiente comando desde el directorio guestbook de tu aplicación, donde se encuentran los archivos app.yaml y index.yaml:

gcloud app deploy app.yaml index.yaml

Los índices de Datastore pueden tardar un tiempo en generarse antes de que tu aplicación esté disponible. Si los índices aún se están generando, recibirás un mensaje NeedIndexError cuando accedas a tu aplicación. Este error es transitorio, así que inténtalo de nuevo un poco más tarde si al principio recibes este error.

Para obtener más información sobre cómo desplegar tu aplicación desde la línea de comandos, consulta el artículo Desplegar una aplicación Python.

Ver la aplicación desplegada

Para iniciar el navegador y ver la aplicación en https://PROJECT_ID.REGION_ID.r.appspot.com, ejecuta el siguiente comando:

gcloud app browse