Ejemplos de API de Imágenes

ID de región

REGION_ID es un código abreviado que Google asigna en función de la región que eliges cuando creas la app. El código no corresponde a un país ni a una provincia, aunque algunos ID de región puedan parecer similares a los códigos de país y provincia que se suelen usar. En el caso de las apps creadas después de febrero de 2020, REGION_ID.r se incluye en las URL de App Engine. En el caso de las apps existentes creadas antes de esta fecha, el ID de región es opcional en la URL.

Obtén más información acerca de los ID de región.

Aprende a subir, transformar, almacenar y entregar imágenes de forma dinámica a través de la API de imágenes. En este ejemplo, se describe cómo publicar mensajes en una pizarra de mensajes pública y subir un avatar con tu saludo.

Crear un modelo de imagen en Datastore

Debes actualizar el modelo de la muestra 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 usuario

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

  1. Agrega un campo que permita al usuario seleccionar un archivo de su computadora para subirlo.

  2. Agrega el atributo enctype a la etiqueta de formulario y especifica que se trata de una publicación de formulario de varias partes.

    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 del Libro de visitas para obtener los datos de imagen de la publicación del formulario y guárdalos 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}))

Cómo transformar imágenes

Para crear avatares de 32x32 necesitarás:

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

    from google.appengine.api import images

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

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

Entregar las imágenes de forma dinámica

Para entregar imágenes, necesitarás:

  1. Crear un controlador de imágenes que entregue imágenes de forma dinámica fuera de 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. Actualizar el HTML para mostrar estas imágenes entregadas 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 pasar la clave del saludo al controlador de imágenes a medida que obtiene el img_id de la solicitud.

Implementar la aplicación en AppEngine

Para subir la app del libro de visitas, 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 del almacén de datos pueden tardar cierto 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 app. Este error es transitorio, por lo que debes intentarlo más tarde si al principio lo recibes.

Para obtener más información acerca de cómo implementar la aplicación desde una línea de comandos, consulta Implementar una aplicación de Python.

Visualizar la aplicación implementada

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

gcloud app browse