Contoh Image API

ID region

REGION_ID adalah kode singkat yang ditetapkan Google berdasarkan region yang Anda pilih saat membuat aplikasi. Kode ini tidak sesuai dengan negara atau provinsi, meskipun beberapa ID region mungkin tampak mirip dengan kode negara dan provinsi yang umum digunakan. Untuk aplikasi yang dibuat setelah Februari 2020, REGION_ID.r disertakan dalam URL App Engine. Untuk aplikasi lama yang dibuat sebelum tanggal tersebut, ID region bersifat opsional dalam URL.

Pelajari ID region lebih lanjut.

Pelajari cara mengupload, mentransformasi, menyimpan, dan menyajikan gambar secara dinamis menggunakan Images API. Contoh ini menjelaskan cara memposting pesan ke papan pesan publik dan mengupload avatar yang berisi salam Anda.

Membuat model Image di Datastore

Anda perlu memperbarui model dari contoh buku tamu untuk menyimpan gambar yang diupload sebagai 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)

Mengupload image pengguna

Anda harus mengubah formulir HTML agar pengguna dapat mengupload image:

  1. Tambahkan kolom yang memungkinkan pengguna memilih file dari komputer mereka untuk diupload.

  2. Tambahkan atribut enctype ke tag formulir dan tentukan bahwa ini adalah postingan formulir multi-bagian.

    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. Perbarui pengendali Buku Tamu untuk mendapatkan data image dari postingan formulir dan simpan sebagai blob di 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}))

Mentransformasi image

Untuk membuat avatar 32x32, Anda harus:

  1. Mengimpor google.appengine.api.images modul.

    from google.appengine.api import images

  2. Panggil fungsi resize dan teruskan data image.

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

Menyajikan image secara dinamis

Untuk menyajikan image, Anda perlu:

  1. Buat pengendali image yang secara dinamis menyajikan image dari jalur /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. Update HTML untuk menampilkan image yang disajikan secara dinamis ini.

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

Anda harus memperbarui HTML Buku Tamu untuk meneruskan kunci salam ke pengendali image karena kode tersebut mendapatkan img_id dari permintaan.

Men-deploy aplikasi ke App Engine

Untuk mengupload aplikasi buku tamu, jalankan perintah berikut dari dalam direktori guestbook aplikasi Anda tempat file app.yaml dan index.yaml berada:

gcloud app deploy app.yaml index.yaml

Indeks Datastore mungkin memerlukan waktu beberapa saat untuk dibuat sebelum aplikasi Anda tersedia. Jika indeks masih dalam proses dibuat, Anda akan menerima pesan NeedIndexError saat mengakses aplikasi Anda. Error ini bersifat sementara, jadi coba lagi nanti jika Anda menerima error ini pada awalnya.

Untuk mempelajari lebih lanjut tentang men-deploy aplikasi dari command line, lihat Men-deploy Aplikasi Python.

Melihat aplikasi yang di-deploy

Untuk meluncurkan browser dan melihat aplikasi di https://PROJECT_ID.REGION_ID.r.appspot.com, jalankan perintah berikut:

gcloud app browse