[Android] GPUImage for Android で超爆速画像フィルターを作成しよう! | アドカレ2013 : SP #13

アドベントカレンダー2013 スマートフォン #13
79件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

超爆速で画像を加工!

アドベントカレンダー13日目は GPUImage for Android という画像加工ライブラリのご紹介です。

gpuimage07

GPUImage for Android はその名の通り GPU で画像加工を処理するライブラリです。 同じ名前の GPUImage という iOS 用のライブラリがありますが、GPUImage for Android はこのライブラリの Android 移植版です。CyberAgent さんの github で公開されており、Apache License 2.0 でライセンスされています。

CPU で処理する場合と比べ物にならないほど超爆速で処理できるのが最大の特長です。また、各フィルタークラスが Photoshop の写真加工を意識した設計になっているという点もかなり捗ります。画像加工する上で右に出るものは居ないライブラリだと思います!ということで GPUImage for Android の使いかたをまとめてみました。

ライブラリをインポートする

ライブラリは Github にあるので clone してきます。

git clone https://github.com/CyberAgent/android-gpuimage.git

このリポジトリを Eclipse にインポートします。librarysample の2つのプロジェクトが含まれているので両方ともインポートしましょう。

gpuimage01

これでOKです。サンプルプロジェクトを実行してみましょう。…と思ったら私の環境では以下のようなエラーになりました。

gpuimage02

これはライブラリの so ファイルが librarysample で競合しているためでした。sample/libs/armeabisample/libs/x86 フォルダを消すとエラーが消えて実行できるようになると思います。

gpuimage03

ちなみに Maven のプロジェクトになっているので、Maven を使ってインポートすることもできます。

<dependency>
  <groupId>jp.co.cyberagent.android.gpuimage</groupId>
  <artifactId>gpuimage-library</artifactId>
  <type>apklib</type>
  <version>(use current version here)</version>
</dependency>

サンプルアプリで遊んでみる

サンプルアプリでは GPUImage for Android で使うことができるさまざまなフィルター処理を試すことができます。フィルターをかける対象は Bitmap かカメラプレビューのいずれかになるので、好きな方を試してみると良いと思います。カメラプレビューでリアルタイムで高速にフィルターをかけることができるのはかなり感動します!さすが GPU ですね!

gpuimage04

画像を加工してみる

それでは画像を加工する処理を実装してみたいと思います。本記事では適当な Bitmap にスケッチ風のフィルターをかける処理を実装してみます。下図はオリジナル画像です。

gpuimage05

ちなみにこちらの柴犬さんは以下のサイトからいただきました!

http://anijan.net/photo/index.html

まずはプロジェクトを作って GPUImage for Android ライブラリをインポートしましょう。 また、加工元となる画像を assets フォルダに入れておきます。

gpuimage06

あとは Activity#onCreate() で assets フォルダから画像を取り出し、GPUImage クラスを使って画像加工処理を実装します。加工した Bitmap を ImageView にセットして表示します。

// 画像をとってくる
AssetManager as = getAssets();
InputStream is = null;
Bitmap bitmap = null;
try {
	is = as.open("dog.jpg");
	bitmap = BitmapFactory.decodeStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// GPUImage で写真加工
GPUImage gpuImage = new GPUImage(this);
gpuImage.setImage(bitmap);
gpuImage.setFilter(new GPUImageToonFilter());
bitmap = gpuImage.getBitmapWithFilterApplied();

// ImageView に表示
ImageView view = new ImageView(this);
view.setImageBitmap(bitmap);
setContentView(view);

実行してみましょう。ちなみにデバッグ実行すると処理が遅いので、なかなか処理が終わらない場合はデバッグ実行ではなく普通に実行するようにしましょう。

gpuimage07

こんな感じでサクッと画像加工できます!

Photoshop で作成したトーンカーブをそのまま適用する

GPUImage for Android の魅力は高速なだけではありません!Photoshop のトーンカーブファイルをセットするだけでトーンカーブをかけることができます!これはデザイン側も実装側も相当捗る素晴らしい機能だと思います!(もちろん本家 iOS 版の GPUImage にも付いています)手順もかなりカンタンなのでぜひ使ってみてください!下図のような感じのフィルターが速攻で作れます。

gpuimage08

手順を解説します。まず Photoshop でいい感じのトーンカーブを作ります。まずは写真を開き「色調補正」ウインドウのメニューで「トーンカーブ」を選択します。

gpuimage09

トーンカーブの名前は適当でOKです。

gpuimage10

トーンカーブ調整ウインドウが表示されるので、いい感じにトーンをカーブさせます。今回は適当にいい感じにしました。

レッド

gpuimage11

グリーン

gpuimage12

ブルー

gpuimage13

値を変えると写真がリアルタイムに変化するので、確認しながらいい感じに調整しましょう。調整が終わったらメニューから「トーンカーブプリセットを保存」を選び、プロジェクトフォルダの assets フォルダに保存しましょう。acv という拡張子のファイルが保存されると思います。

gpuimage14

gpuimage15

ここまでできたら Photoshop の作業は終わりです。ADT に戻り、先ほどの画像加工処理のソースコードを修正します。

// 画像をとってくる
AssetManager as = getAssets();
InputStream is = null;
Bitmap bitmap = null;
try {
	is = as.open("dog.jpg");
	bitmap = BitmapFactory.decodeStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// ACVファイルをとってきてFilterを作成
GPUImageToneCurveFilter filter = new GPUImageToneCurveFilter();
try {
	is = as.open("tone_curve.acv");
	filter.setFromCurveFileInputStream(is);
	is.close();
} catch (IOException e) {
	Log.e("MainActivity", "Error");
}

// GPUImage で写真加工
GPUImage gpuImage = new GPUImage(self);
gpuImage.setImage(bitmap);
gpuImage.setFilter(filter);
bitmap = gpuImage.getBitmapWithFilterApplied();

// ImageView に表示
ImageView view = new ImageView(self);
view.setImageBitmap(bitmap);
setContentView(view);

実行してみると…いい感じになりました!

gpuimage08

こんな感じで、Photoshop から書き出したトーンカーブファイルを読み込んで適用させることができます。トーンカーブの調整値はファイルを上書きするだけで良いので、デザイナーさんにあとで「やっぱりもうちょっと調整したいんだけど…」とお願いされてもソースコードを修正することなく変更できますね。

このライブラリを活用したアプリ「四字熟語カメラ」

この便利なライブラリを活用したアプリ「四字熟語カメラ」を先日リリースしました! Android 版と iOS 版の同時リリースになりますが、いずれも GPUImage ライブラリを使わせていただきました。

gpuimage16

Android 版をインストールする

iOS 版をインストールする

本アプリは「四字熟語」をコンセプトに、四字熟語の意味に合ったエフェクトがかかる面白系カメラアプリです。下図のようなエフェクトがかかった写真をカンタンに作り、シェアすることができます。

gpuimage17

この写真加工の処理すべてに GPUImage を使っています。実際に開発してみたところ、写真加工の処理の作業がかなり捗りました! GPUImage for Android が本家 GPUImage のクラス名や調整値をほぼそのまま移植しているので、どちらかのプラットフォームでフィルターを作ってしまえば移植はクラスの作りかたとかを変えるだけで済みます。どのような処理速度で加工できるのか試す意味でも、まずはインストールして試していただければと思います!

まとめ

以上、素敵な画像加工ライブラリの紹介でした!いいこと尽くめなライブラリですので、画像加工するアプリを作る場合はぜひ活用しましょう!

AWS Cloud Roadshow 2017 福岡

  • jyj

    think you !非常感谢你,帮我解决了一个问题