Exemples de l'API Images

Apprenez à transférer, transformer, stocker et publier des images de manière dynamique à l'aide de l'API Images. Ce guide complète l'exemple de livre d'or du guide de démarrage. Le livre d'or est modifié pour permettre à un utilisateur de mettre en ligne un avatar avec son 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 de l'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 devrez mettre à jour le code HTML de Guestbook pour transmettre la clé de bienvenue au gestionnaire d'images au fur et à mesure qu'il récupère les données img_id de la requête.

Déployer l'application sur App Engine

Pour mettre en ligne l'application de livre d'or, exécutez la commande suivante dans le répertoire guestbook de votre application, là où les fichiers app.yaml et index.yaml sont enregistrés :

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 le navigateur et afficher l'application sur http://[YOUR_PROJECT_ID].appspot.com, exécutez la commande suivante :

gcloud app browse
Cette page vous a-t-elle été utile ? Évaluez-la :

Envoyer des commentaires concernant…

Environnement standard App Engine pour Python