Exemples de l'API Images

ID de la région

Le REGION_ID est un code abrégé que Google attribue en fonction de la région que vous sélectionnez lors de la création de votre application. Le code ne correspond pas à un pays ou une province, même si certains ID de région peuvent ressembler aux codes de pays et de province couramment utilisés. Pour les applications créées après février 2020, REGION_ID.r est inclus dans les URL App Engine. Pour les applications existantes créées avant cette date, l'ID de région est facultatif dans l'URL.

En savoir plus sur les ID de région

Découvrez comment importer, transformer, stocker et publier des images de manière dynamique à l'aide de l'API Images. Cet exemple explique comment publier des messages sur une page publique et importer un avatar avec votre message d'accueil.

Créer un modèle d'image dans le magasin de données

Vous devez mettre à jour le modèle à partir de l'exemple de livre d'or pour stocker l'image transférée sous forme de 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)

Transférer des images d'utilisateurs

Vous devez modifier le formulaire HTML pour permettre à l'utilisateur de transférer une image :

  1. Ajoutez un champ qui permet à l'utilisateur de sélectionner un fichier à transférer depuis son ordinateur.

  2. Ajoutez l'attribut enctype à la balise de formulaire et spécifiez qu'il s'agit d'un formulaire POST en plusieurs parties.

    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. Mettez à jour le gestionnaire Guestbook pour extraire les données d'image du formulaire POST et les stocker en tant que blob dans le magasin de données.

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

Transformer des images

Pour créer des avatars 32x32, appliquez la procédure suivante :

  1. Importez le module google.appengine.api.images.

    from google.appengine.api import images

  2. Appelez la fonction resize et transmettez les données d'image.

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

Publication d'images en dynamique

Pour publier des images, appliquez la procédure suivante :

  1. Créez un gestionnaire d'images qui publie des images en dynamique à partir du chemin /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. Mettez à jour le code HTML pour afficher ces images publiées en dynamique.

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

Vous devez mettre à jour le code HTML du livre d'or pour transmettre la clé du message de bienvenue au gestionnaire d'images lorsqu'il récupère le img_id de la requête.

Déployer l'application sur App Engine

Pour importer l'application de livre d'or, exécutez la commande suivante à partir du répertoire guestbook de votre application où se trouvent les fichiers app.yaml et index.yaml :

gcloud app deploy app.yaml index.yaml

Il peut s'écouler un certain temps avant que les index du magasin de données ne soient générés et que votre application ne soit disponible. Si les index sont encore en cours de génération, vous recevrez un message NeedIndexError lors de l'accès à l'application. Il s'agit d'une erreur transitoire. Nous vous invitons donc à réessayer un peu plus tard si vous recevez cette erreur au début.

Pour en savoir plus sur le déploiement de l'application à partir de la ligne de commande, consultez la section Déployer une application PHP.

Afficher l'application déployée

Pour lancer votre navigateur et afficher l'application à l'adresse https://PROJECT_ID.REGION_ID.r.appspot.com, exécutez la commande suivante :

gcloud app browse