カメラアプリ開発入門
（第３回
)
画像加工のいろは 2013/7/27 名古屋iPhone開発者勉強会 基本的な画像加工について学ぶ 13年7月27日土曜日大塚 崇（おおつか たかし） DJ / フリーランスのエンジニア・プログラマ ハンドル名: takatronix Facebook/Twitter/Skype/LINE/Weibo -> takatronix http://takatronix.com 趣味興味：旅行、語学、筋トレ、LEGO、FX、心理学、 脳科学、宇宙
自己紹介
リリースしたアプリ
セクシーミラー、
SEXY SCAN、 放射能汚染
地図、和牛スキャン
...
(代表作)
セクシーミラー
-編集不要の神自撮りアプリ
13年7月27日土曜日http://sexymirror-app.com
2013/1リリース イギリスのiPhone総合で
１０位に、現在５５万ダウンロード
画像加工の話の前に
Objective-Cのクラスを拡張する方法
Category(カテゴリ)を覚えよう
カテゴリって？
クラスを継承せずにクラスを拡張できる
クラス継承との比較
メリット
デメリット
メンバ変数の追加はできない 既存のクラスを拡張できる 13年7月27日土曜日具体的なメリット
画像加工のフィルタをViewControllerから
UIImageのメソッドに引越し
プロジェクトに依存しないため
カテゴリの文法をおぼよう
クラス名＋カテゴリ名
.h
@interface
クラス名 (カテゴリ名)
-追加する関数宣言
@end
クラス名＋カテゴリ名
.m
@implementation
クラス名 (カテゴリ名)
-追加する関数の実装
@end
UIImageを拡張する
追加するクラスとカテゴリ名を設定
http://takatronix.com/tutorial/20130525.zip カメラアプリ開発入門１プロジェクト
http://takatronix.com/tutorial/20130727.zip 今回のプロジェクト一式
第一回目ので作成したフィルタ
をカテゴリに移動
// モノクロフィルタ
-(UIImage*)monochromeFilter:(UIImage*)image{
// UIImageをCoreImageに変換する
CIImage* ciImage = [[CIImage alloc] initWithImage:image];
ViewControllerの関数から
// モノクロフィルタ
-(UIImage*)monochromeFilter{
// UIImageをCoreImageに変換する
CIImage* ciImage = [[CIImage alloc] initWithImage:self];
UIImage+Test.m
引数は必要なくself(自分の画像)をソースにする
UIimage+Test.h
@interface UIImage (Test)// モノクロフィルタ
-(UIImage*)monochromeFilter;
// ケラレフィルタ（カメラの周辺光量落ち)
-(UIImage*)vignetteFilter;
imageView.image = [self monochromeFilter:image];
imageView.image = [image monochromeFilter];
ViewControllerにフィルタがある場合
（前回までの記述方法
)
UIImageのカテゴリの場合
_imageView.image = [[image monochromeFilter] vignetteFilter];
フィルタを重ねる
さてここから本題
オフスクリーン描画と
グラフィックスコンテキスト
を理解する
オフスクリーン
画面に表示されていないメモリ上のスクリーン 仮想画面とも言われる
コンテキストとは
(英)Context ：文の前後関係、文脈
ペンの色や背景色などを保存するリソース
解像度を変更する
UIImageに解像度変更機能を追加
-(UIImage*)resizedImage:(CGSize)size{
// 新しいサイズでオフスクリーンバッファを作成する
UIGraphicsBeginImageContext(size);
// 現在のコンテキスト(オフスクリーンバッファ）に 自分のイメージを描写する
[self drawInRect:CGRectMake(0,0,size.width,size.height)];
// オフスクリーンバッファをUIImageに変換
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
// オフスクリーンバッファを破棄
UIGraphicsEndImageContext();
// 新しい画像を返す
画像の切り出し
UIImageに切り出し機能を追加
// 画像の一部分を切り出す
-(UIImage*)cropImage:(CGRect)rect{
CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], rect); UIImage *retImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef); return retImage;
}
画像の反転
UIImageに画像反転機能を追加する
- (UIImage *)mirrorImage{
CGImageRef imgRef = [self CGImage]; // 画像データ取得
UIGraphicsBeginImageContext(self.size); // コンテキスト取得
CGContextRef context = UIGraphicsGetCurrentContext(); // コンテキストの軸をXもYも等倍で反転
CGContextTranslateCTM( context, self.size.width, self.size.height); // コンテキストの原点変更
CGContextScaleCTM( context, -1.0, -1.0); // コンテキストにイメージを描画
CGContextDrawImage( context, CGRectMake( 0, 0, self.size.width, self.size.height), imgRef); // コンテキストからイメージを取得
UIImage *retImg = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();
return retImg; }
座標系の話
CoreGraphicsは左下基準 Y軸が反転している 13年7月27日土曜日
CTMとは
画像の回転
画像の回転
-(UIImage*)rotateImage:(int)angle{
CGImageRef imgRef = [self CGImage]; CGContextRef context;
// 角度に応じて現在のコンテキストのCTMを変更
switch (angle) { case 90:
UIGraphicsBeginImageContext(CGSizeMake(self.size.height, self.size.width)); context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, self.size.height, self.size.width); CGContextScaleCTM(context, 1.0, -1.0);
CGContextRotateCTM(context, M_PI/2.0); break;
case 180:
UIGraphicsBeginImageContext(CGSizeMake(self.size.width, self.size.height)); context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, self.size.width, 0); CGContextScaleCTM(context, 1.0, -1.0);
CGContextRotateCTM(context, -M_PI); break;
case 270:
UIGraphicsBeginImageContext(CGSizeMake(self.size.height, self.size.width)); context = UIGraphicsGetCurrentContext();
CGContextScaleCTM(context, 1.0, -1.0); CGContextRotateCTM(context, -M_PI/2.0); break;
default:
return self; }
// オフスクリーンに描写->UIImage変換
CGContextDrawImage(context, CGRectMake(0, 0, self.size.width, self.size.height), imgRef); UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
プロジェクトとこのスライドはここから
落とせますよ。
http://takatronix.com/tutorial/20130727.zip
takatronix
検索
ありがとうございました
takatronix
検索
http://takatronix.com 13年7月27日土曜日
