GAEの画像処理リソース使って画像のサムネイル生成&データストアへ保存

ここを参考にした。

  1. 画像をアップロード
  2. 元画像と生成したサムネイル画像を保存
  3. 保存した画像を表示する

これらを実現できた。やったね!

  • アプリケーション作成
> python manage.py startapp img
  • manage.py settings.py
# INSTALLED_APPS に追記
INSTALLED_APPS = (
    'img',
)
  • urls.py
# urlpatterns に追記
urlpatterns = auth_patterns + patterns('',
    # ごにょごにょ
    (r'^img/(.*)', include(img.urls)),
    # ごにょごにょ
) + urlpatterns
  • img/urls.py
# -*- coding: utf-8 -*-
from django.conf.urls.defaults import *

urlpatterns = patterns(
    'img.views'
    ,(r'^$', 'index')
    # 画像アップロード用フォーム
    ,(r'^form', 'formImg')
    # 画像保存処理
    ,(r'^save', 'saveImg')
    # 画像一覧表示
    ,(r'^list', 'listImg')
    # 画像出力
    ,(r'^disp', 'displayImg')
)
  • img/models.py
# -*- coding: utf-8 -*-
from django.utils.translation import ugettext_lazy as _
from google.appengine.ext import db

class Photos(db.Model):
    created_date = db.DateTimeProperty(auto_now_add=True)
    img = db.BlobProperty()
    imgsize = db.IntegerProperty()
    imgtype = db.StringProperty()
    thumb = db.BlobProperty()
    thumbsize = db.IntegerProperty()
    thumbtype = db.StringProperty()
  • img/views.py
# -*- coding: utf-8 -*-
from django.http import HttpResponseRedirect, HttpResponse
from django.template import Context, loader
from google.appengine.api import images
from img.models import Photos

def index(request):
    return HttpResponse('Django!')

# 画像アップロード用フォーム
def formImg(request):
    c = Context()
    t = loader.get_template('form.html')
    return HttpResponse(t.render(c))

# 画像保存処理
def saveImg(request):
    if request.method == 'POST' :
        if request.FILES.has_key('photo') :
            # 元画像
            photo_raw = request.FILES['photo']
            # 元画像データ
            photo_data = photo_raw.read()
            # サムネイル生成
            thumb = images.resize(photo_data, 100, 100)
            # 保存
            pmodel = Photos()
            pmodel.img = photo_data
            pmodel.imgsize = photo_raw.size
            pmodel.imgtype = photo_raw.content_type
            pmodel.thum = thumb
            pmodel.thumsize = len(thumb)
            pmodel.thumtype = photo_raw.content_type
            pmodel.put()
            return HttpResponseRedirect('./form')
        return HttpResponse('アップロードする画像が無いよ', mimetype='text/html')
    return HttpResponseRedirect('./form')

# 画像一覧表示
def listImg(request):
    imagelist = Photos.all().order('-created_date')
    result = []
    if len(imagelist) > 0 :
        for val in imagelist:
            li = [val.created_date, val.key(), val.imgsize, val.imgtype]
            result.append(li)
    c = Context({'photolist': result})
    t = loader.get_template('list.html')
    return HttpResponse(t.render(c))

# 画像出力
def displayImg(request):
    if request.method == 'GET' and request.GET.has_key('id') :
        photo_data = Photos.get(request.GET['id'])
    else:
        photo_list = Photos.all().order('-created_date').fetch(1)
        photo_data = image_list[0]

    if request.method == 'GET' and request.GET.has_key('thumb') and request.GET['thumb'] == 'on' :
        data = photo_data.thumb
        imgtype = str(photo_data.thumbtype)
    else:
        data = photo_data.img
        imgtype = str(photo_data.imgtype)

    return HttpResponse(data, mimetype=imgtype)
  • img/templates/form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>アップロードフォーム</title>
<style type="text/css">
</style>
</head>
<body>
<a href="./list">画像一覧</a><br>
<br>
画像アップロード<br>
<form method="post" action="./save" enctype="multipart/form-data">
<input type="file" name="photo">
<input type="submit" value="アップロード">
</form>
</body>
</html>
  • img/templates/list.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>画像一覧</title>
</head>
<body>
<a href="./form">画像アップロード</a>
<p>
{% for val in photolist %}
元画像<br>
<img src="./disp?id={{ val.1 }}"><br>
upload_date : {{ val.0 }}<br>
size : {{ val.2 }}byte<br>
type : {{ val.3 }}<br>
サムネイル<img src="./disp?id={{ val.1 }}&thumb=on"><br>
<br>
{% endfor %}
</p>
</body>
</html>