Images API 範例

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

瞭解如何使用 Images API，以動態的方式上傳、轉換、儲存及提供圖片。本範例說明如何在公開留言板上發布訊息，並上傳帶有問候語的自訂圖片。

在 Datastore 中建立圖片模型

您必須更新留言板範例中的模型，以 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)

上傳使用者圖片

您必須修改 HTML 表單，讓使用者上傳圖片：

1. 新增可讓使用者從電腦選取檔案上傳的欄位。

2. 在表單標記中加入 enctype 屬性，並指定這是多部分表單的發布內容。

   self.response.out.write("""
         <form action="/https/cloud.google.com/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. 更新留言板處理常式以取得表單貼文中的圖片資料，並以 blob 形式將圖片資料儲存在資料儲存庫中。

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

轉換圖片

如要建立 32x32 顯示圖片，請按照下列步驟操作：

1. 匯入 google.appengine.api.images 模組。

   from google.appengine.api import images

2. 呼叫 resize 函式，並傳入圖片資料。

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

動態提供圖片

如要提供圖片，請按照下列步驟操作：

1. 建立圖片處理程序，以便動態地透過 /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. 更新 HTML 以顯示這類動態提供的圖片。

   self.response.out.write('<div><img src="/https/cloud.google.com/img?img_id=%s"></img>' %
                           greeting.key.urlsafe())
   self.response.out.write('<blockquote>%s</blockquote></div>' %
                           cgi.escape(greeting.content))

您需要更新留言板的 HTML，將問候語的鍵值傳遞至圖片處理常式，以便從要求中取得 img_id。

將應用程式部署至 App Engine

如要上傳留言板應用程式，請在 app.yaml 和 index.yaml 檔案所在的應用程式 guestbook 目錄中執行下列指令：

gcloud app deploy app.yaml index.yaml

在應用程式正式上線前，可能需要花點時間才能產生 Datastore 索引。如果索引仍在產生中，您會在存取應用程式時收到 NeedIndexError 訊息。這項錯誤是暫時性的，因此如果一開始收到這項錯誤，請稍後再試一次。

如要進一步瞭解如何透過指令列部署應用程式，請參閱部署 Python 應用程式一文。

查看部署的應用程式

如要啟動瀏覽器並在 https://PROJECT_ID.REGION_ID.r.appspot.com 查看應用程式，請執行下列指令：

gcloud app browse