GAEで画像を編集する


GoogleAppEngineでの画像処理の一例として、前回、画像のサムネイルを表示するを紹介しました。
今回では拡大縮小だけでなく、切り抜きなどGAEに用意された画像編集APIについて解説します。

[table “189” not found /]

また変わったものでは、ImagesServiceFactoryクラスのmakeImFeelingLuckyメソッドがあります。このメソッドを使うとコントラストと色調の自動調整機能が使えます。
Google検索の「I’m Feeling Lucky」ボタンと同じ名前で面白いですね。

画像編集のためのサンプルコードは続きから

画像処理の大まかな流れ

GAEでの画像処理は大まかに以下の手順を踏みます

  • イメージの取得(Imageクラス)
  • 画像操作(縮小や切り抜き、反転などをTransformクラスで覚えます)
  • 操作の並べ替え(複数操作がある場合、縮小してから反転などTransformクラスのListを用意します)
  • イメージの出力

サンプルコード

以下のサンプルコードでは、blobKeyを取得したあとの画像編集について解説しています。
blobKeyの使い方、ブロブストアへの画像保存に関しては、ブロブストアを用いて画像をアップロードするを確認してください。

ブロブストアを使わなくても、ImagesServiceFactoryクラスにはmakeImage(byte[] imageData)メソッドがあり、指定されたバイト列からGAEで使えるImagesクラスのインスタンスを生成できます。

■src/ImageServlet.java

public class ImageServlet extends HttpServlet {
    private BlobstoreService blobstoreService
    = BlobstoreServiceFactory.getBlobstoreService();

    public void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws IOException {

    Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);
    BlobKey blobKey = blobs.get("filename");

    //イメージの取得
    Image image = ImagesServiceFactory.makeImageFromBlob(blobKey);

    //操作
    Transform trans = ImagesServiceFactory.makeHorizontalFlip();

    //変換
    List<Transform> transList = new ArrayList<Transform>();
    transList.add(trans);
    Transform compositeTrans = ImagesServiceFactory.makeCompositeTransform(transList);

    //イメージの生成
    ImagesService imageService = ImagesServiceFactory.getImagesService();
    Image convImage = imageService.applyTransform(compositeTrans,
                             image, ImagesService.OutputEncoding.PNG);

    //表示
	resp.setContentType("image/png");
	OutputStream os = resp.getOutputStream();
	os.write(convImage.getImageData());

	}
}

サンプルコードを順番に見ていきましょう。
●取得~操作
12行目:画像をブロブストアより取得します。
15行目:ここでは操作内容を記載します。今回はmakeHorizontalFlipメソッドで画像の水平反転を行ってみましょう。
反転操作を行うのに必要な情報が入ったTransformクラスのtransインスタンスが返ってきます。
20行目:いくつか同時に編集したい場合のための処理です。
ListにはいったTransform情報を合成して、ひとつの変換情報にまとめます。先ほどのTransformインスタンスをListに追加して、makeCompositeTransformメソッドで、最終出力用の変換情報を取得します。

●生成~表示
24,25行目:imageServiceクラスのapplyTransformメソッドを使って、編集後のイメージを生成しています。
30行目:画像データのバイト列を出力するにはImageクラスのgetImageDataメソッドが使えます。
サンプルコードではそのまま、ブラウザに表示しています。

以上、お疲れ様でした!