SlideShare a Scribd company logo
1 of 37
Download to read offline
カメラアプリ開発入門
(第3回)
画像加工のいろは
2013/7/27 名古屋iPhone開発者勉強会
基本的な画像加工について学ぶ
13年7月27日土曜日
大塚 崇(おおつか たかし)
DJ / フリーランスのエンジニア・プログラマ
ハンドル名: takatronix
Facebook/Twitter/Skype/LINE/Weibo -> takatronix
http://takatronix.com
趣味興味:旅行、語学、筋トレ、LEGO、FX、心理学、 
脳科学、宇宙
自己紹介
13年7月27日土曜日
リリースしたアプリ
セクシーミラー、SEXY SCAN、 放射能汚染
地図、和牛スキャン ...
(代表作)
セクシーミラー-編集不要の神自撮りアプリ
13年7月27日土曜日
http://sexymirror-app.com
2013/1リリース イギリスのiPhone総合で
10位に、現在55万ダウンロード
セクシーミラー-編集不要の神自撮りアプリ
13年7月27日土曜日
画像加工の話の前に
Objective-Cのクラスを拡張する方法
Category(カテゴリ)を覚えよう
13年7月27日土曜日
カテゴリって?
クラスを継承せずにクラスを拡張できる
Objective-Cの言語仕様
13年7月27日土曜日
クラス継承との比較
メリット
デメリット
メンバ変数の追加はできない
既存のクラスを拡張できる
13年7月27日土曜日
具体的なメリット
画像加工のフィルタをViewControllerから
UIImageのメソッドに引越し
プロジェクトに依存しないため
使い回しが楽 (゚д゚)ウマー
13年7月27日土曜日
カテゴリの文法をおぼよう
13年7月27日土曜日
クラス名+カテゴリ名.h
@interface クラス名 (カテゴリ名)
-追加する関数宣言
@end
クラス名+カテゴリ名.m
@implementation クラス名 (カテゴリ名)
-追加する関数の実装
@end
13年7月27日土曜日
UIImageを拡張する
13年7月27日土曜日
File->New->File...
13年7月27日土曜日
追加するクラスとカテゴリ名を設定
13年7月27日土曜日
タン、タンターンとひな形が完成
13年7月27日土曜日
http://takatronix.com/tutorial/20130525.zip
カメラアプリ開発入門1プロジェクト
http://takatronix.com/tutorial/20130727.zip
今回のプロジェクト一式
13年7月27日土曜日
第一回目ので作成したフィルタ
をカテゴリに移動
13年7月27日土曜日
// モノクロフィルタ
-(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(自分の画像)をソースにする
13年7月27日土曜日
UIimage+Test.h
@interface UIImage (Test)
// モノクロフィルタ
-(UIImage*)monochromeFilter;
// ケラレフィルタ(カメラの周辺光量落ち)
-(UIImage*)vignetteFilter;
@end
13年7月27日土曜日
imageView.image = [self monochromeFilter:image];
imageView.image = [image monochromeFilter];
ViewControllerにフィルタがある場合
(前回までの記述方法)
UIImageのカテゴリの場合
13年7月27日土曜日
_imageView.image = [[image monochromeFilter] vignetteFilter];
フィルタを重ねる
モノクロフィルタ -> ケラレ
13年7月27日土曜日
さてここから本題
13年7月27日土曜日
オフスクリーン描画と
グラフィックスコンテキスト
を理解する
13年7月27日土曜日
オフスクリーン
画面に表示されていないメモリ上のスクリーン
仮想画面とも言われる
13年7月27日土曜日
コンテキストとは
(英)Context :文の前後関係、文脈
ペンの色や背景色などを保存するリソース
グラフィックコンテキスト
13年7月27日土曜日
解像度を変更する
13年7月27日土曜日
UIImageに解像度変更機能を追加
-(UIImage*)resizedImage:(CGSize)size{
// 新しいサイズでオフスクリーンバッファを作成する
UIGraphicsBeginImageContext(size);
// 現在のコンテキスト(オフスクリーンバッファ)に 自分のイメージを描写する
[self drawInRect:CGRectMake(0,0,size.width,size.height)];
// オフスクリーンバッファをUIImageに変換
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
// オフスクリーンバッファを破棄
UIGraphicsEndImageContext();
// 新しい画像を返す
return newImage ;
}
13年7月27日土曜日
画像の切り出し
13年7月27日土曜日
UIImageに切り出し機能を追加
// 画像の一部分を切り出す
-(UIImage*)cropImage:(CGRect)rect{
CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], rect);
UIImage *retImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return retImage;
}
13年7月27日土曜日
画像の反転
13年7月27日土曜日
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;
}
13年7月27日土曜日
座標系の話
CoreGraphicsは左下基準
Y軸が反転している
13年7月27日土曜日
CTMとは
変換行列(CTM : Current Transformation Matrix)
13年7月27日土曜日
画像の回転
13年7月27日土曜日
画像の回転-(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();
UIGraphicsEndImageContext();
return retImage;
}
13年7月27日土曜日
プロジェクトとこのスライドはここから
落とせますよ。
http://takatronix.com/tutorial/20130727.zip
13年7月27日土曜日
takatronix検索
http://takatronix.com
13年7月27日土曜日
ありがとうございました
takatronix検索
http://takatronix.com
13年7月27日土曜日

More Related Content

Viewers also liked

【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
leverages_event
 

Viewers also liked (20)

まだSwiftで消耗してるの?
まだSwiftで消耗してるの?まだSwiftで消耗してるの?
まだSwiftで消耗してるの?
 
Unityで横スクロールアクションゲームを作ってみる(第2回unity初心者勉強会)
Unityで横スクロールアクションゲームを作ってみる(第2回unity初心者勉強会)Unityで横スクロールアクションゲームを作ってみる(第2回unity初心者勉強会)
Unityで横スクロールアクションゲームを作ってみる(第2回unity初心者勉強会)
 
【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
【ヒカ☆ラボ】初心者向けSwiftアプリのリファクタリング
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針
HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針
HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針
 
Xamarin & Google Maps SDKでクロスプラットフォーム地図アプリ
Xamarin & Google Maps SDKでクロスプラットフォーム地図アプリXamarin & Google Maps SDKでクロスプラットフォーム地図アプリ
Xamarin & Google Maps SDKでクロスプラットフォーム地図アプリ
 
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
 
Swift Code in Swift - 2日間でゲームを作ってみた
Swift Code in Swift - 2日間でゲームを作ってみたSwift Code in Swift - 2日間でゲームを作ってみた
Swift Code in Swift - 2日間でゲームを作ってみた
 
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみたXamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
 
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメXamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
 
続Xamarinはじめました
続Xamarinはじめました続Xamarinはじめました
続Xamarinはじめました
 
Jxugc#22 lt古川
Jxugc#22 lt古川Jxugc#22 lt古川
Jxugc#22 lt古川
 
Xamarin.Forms概要
Xamarin.Forms概要Xamarin.Forms概要
Xamarin.Forms概要
 
Xamarinは辛いよ
Xamarinは辛いよXamarinは辛いよ
Xamarinは辛いよ
 
Xamarin.Formsで鉄道模型を制御してみた
Xamarin.Formsで鉄道模型を制御してみたXamarin.Formsで鉄道模型を制御してみた
Xamarin.Formsで鉄道模型を制御してみた
 
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 EastiOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
 
Enterpriseから見たXamarinの可能性
Enterpriseから見たXamarinの可能性Enterpriseから見たXamarinの可能性
Enterpriseから見たXamarinの可能性
 
Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発
 
ゆるふわ Xamarin Tips
ゆるふわ Xamarin Tipsゆるふわ Xamarin Tips
ゆるふわ Xamarin Tips
 
JXUGC 13 東京 はじめに
JXUGC 13 東京 はじめにJXUGC 13 東京 はじめに
JXUGC 13 東京 はじめに
 

Recently uploaded

Recently uploaded (11)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 

カメラアプリ開発入門3