iPhoneカメラアプリ開発入門（第１回）

カメラアプリ開発入門（第一回)

まずは基本の基本から

CoreImageを使った画像加工まで

2013/5/25 名古屋iPhone開発者勉強会13年5月25日土曜日

大塚　崇（おおつか　たかし）

DJ / フリーランスのエンジニア・プログラマ

ハンドル名: takatronix

Facebook/Twitter/Skype/LINE/Weibo -> takatronix

http://takatronix.com

趣味興味：旅行、語学、筋トレ、LEGO、FX、心理学、　脳科学、宇宙

自己紹介

13年5月25日土曜日



リリースしたアプリデカ目ミラー、SEXY SCAN、放射能汚染地図、和牛スキャン ...

デカ目ミラー(SexyMirror)2013/1リリースイギリスのiPhone総合で何故か１０位に、

現在４０万ダウンロード


iOSカメラAPIUIImagePickerController

AVFoundation.framework

iOS4から、標準のカメラUIを使わないアプリが作れる

よくあるカメラのUI

非常に簡単だが自由がないリアルタイムエフェクトはできない

実装は結構大変だがなんでもできる13年5月25日土曜日

iOS画像処理方法

CoreImage (CPU/GPU)

OpenGL (GPU)

ピクセル処理 (CPU)

OpenCV (CPU/GPU)

vImage (GPU)


UIImagePickerControllerの使い方

最初の一歩


プロジェクトの作成


適当に設定して


適当に画面を設計


ViewController.h に追加

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate>


ViewController.hに追加

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate>

@property IBOutlet UIImageView* imageView;

@end


フォトライブラリを開く処理

ViewController.mに追加

// フォトライブラリを開く- (IBAction)openPhotoLibrary:(id)sender { // フォトライブラリが使えるかチェック // カメラを開く場合 // UIImagePickerControllerSourceTypePhotoLibrary　を // UIImagePickerControllerSourceTypeCamera に変更! if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary])! { // UIImagePickerControllerを作成し初期化 new = alloc + init! ! UIImagePickerController* imagePicker = [UIImagePickerController new]; // カメラを開く場合 sourceType = UIImagePickerControllerSourceTypeCamera; imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; // 編集可能にする場合はYES imagePicker.allowsEditing = YES; // 自分への通知設定 imagePicker.delegate = self; // フォトライブラリを開く [self presentViewController:imagePicker animated:YES completion:^{ // 開いたタイミングに呼ばれる NSLog(@"(1)フォトライブラリを開いた"); }]; }}


ViewController.mに追加撮影後orサムネイル選択後に呼ばれる処理

テキスト

// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage]; UIImage* savedImage; if(editedImage){ savedImage = editedImage; } else{ savedImage = originalImage; } // 選択された画像を表示 _imageView.image = savedImage;

// 開いているカメラ・フォトライブラリを閉じる [self dismissViewControllerAnimated:YES completion:^{ }];}


imageViewを接続


ボタンに接続


ボタンを押して


あれ？(^_^;)？


シミュレータに画像がない場合

Safariで画像検索して保存してね


どぉーん


フィルタがないカメラアプリとか小学生までだよねー？


CoreImageを使う


CoreImage.frameworkを追加



#import "ViewController.h"#import <CoreImage/CoreImage.h>

@interface ViewController ()

@end


モノクロフィルタを作るViewController.mに追加

// グレースケール画像を作成する-(UIImage*)monochromeFilter:(UIImage*)image{ // UIImageをCoreImageに変換する CIImage* ciImage = [[CIImage alloc] initWithImage:image];

// CoreImageフィルタを作成する CIFilter* ciFilter = [CIFilter filterWithName:@"CIColorMonochrome" keysAndValues:kCIInputImageKey, ciImage, // パラメータ：入力色（RGBのフィルタ係数） // セピア色にするなら [CIColor colorWithRed:1.0 green:0.7 blue:0.4] @"inputColor", [CIColor colorWithRed:1.0 green:1.0 blue:1.0], // パラメータ(度合い) // 0.5にすれば半分の適用度になります @"inputIntensity", [NSNumber numberWithFloat:1.0], nil]; // CoreImageのコンテクストを作成 CIContext* ciContext = [CIContext contextWithOptions:nil]; // フィルタを適用 CGImageRef cgImage = [ciContext createCGImage:ciFilter.outputImage fromRect:[ciFilter.outputImage extent]]; // CGImageRefをUIImageに変換 UIImage* retImage = [UIImage imageWithCGImage:cgImage scale:image.scale orientation:UIImageOrientationUp]; // CGImage開放 CGImageRelease(cgImage);

return retImage;}


フィルタを適用するViewController.mを修正

// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage]; UIImage* savedImage; if(editedImage){ savedImage = editedImage; } else{ savedImage = originalImage; } // モノクロフィルタを適用してから // 選択された画像を表示 _imageView.image = [self monochromeFilter:savedImage];



パラメータを変えてみよう

@"inputColor", [CIColor colorWithRed:1.0 green:0.7 blue:0.4],

@"inputColor", [CIColor colorWithRed:1.0 green:1 blue:0], @"inputIntensity", [NSNumber numberWithFloat:0.5],


ケラレフィルタ（カメラの周辺光量落ち）

Instagramっぽい効果をだせます


ケラレフィルタを作る

// ケラレフィルタ（カメラの周辺光量落ち)-(UIImage*)vignetteFilter:(UIImage*) image{ // UIImageをCoreImageに変換する CIImage* ciImage = [[CIImage alloc] initWithImage:image]; // CoreImageフィルタを作成する CIFilter* ciFilter = [CIFilter filterWithName:@"CIVignette" keysAndValues:kCIInputImageKey, ciImage,

// @"inputRadius", [NSNumber numberWithFloat:2.0], // パラメータ(度合い) // 0.5にすれば半分の適用度になります @"inputIntensity", [NSNumber numberWithFloat:1.0], nil]; // CoreImageのコンテクストを作成 CIContext* ciContext = [CIContext contextWithOptions:nil]; // フィルタを適用 CGImageRef cgImage = [ciContext createCGImage:ciFilter.outputImage fromRect:[ciFilter.outputImage extent]]; // CGImageRefをUIImageに変換 UIImage* retImage = [UIImage imageWithCGImage:cgImage scale:image.scale orientation:UIImageOrientationUp]; // CGImage開放 CGImageRelease(cgImage); return retImage;

}



// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage]; UIImage* savedImage; if(editedImage){ savedImage = editedImage; } else{ savedImage = originalImage; }

// モノクロフィルタ＋ケラレフィルタを適用し、画面に表示 _imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];


モノクロフィルタ＋ケラレフィルタを適用


ちょと味がでますね


カメラロールへ保存

-(void)image:(UIImage*)image didFinishSavingWithError:(NSError*)error contextInfo:(void*)contextInfo{ if(error){ NSLog(@"Error"); }else{ NSLog(@"保存した"); }}

ViewController.mへ追加

// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage]; UIImage* savedImage; if(editedImage){ savedImage = editedImage; } else{ savedImage = originalImage; }

// モノクロフィルタ＋ケラレフィルタを適用し、画面に表示 _imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];

// カメラロールへ保存する UIImageWriteToSavedPhotosAlbum(_imageView.image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);



プロジェクトとこのスライドはここから落とせますよ。

http://takatronix.com/tutorial/20130525.zip

次回から実機転送が必須（予定)になりますので、興味がある人は、Appleに開発者登録と実機転送まで、済ましておいてください。




takatronix 検索

http://takatronix.com13年5月25日土曜日



ありがとうございました

takatronix 検索

http://takatronix.com13年5月25日土曜日



iPhoneカメラアプリ開発入門（第１回）

Documents

Transcript of iPhoneカメラアプリ開発入門（第１回）