フィルター効果の前後を同時に表示して見比べる
今回のプログラムは、前回の写真を撮影するだけのプログラムに手を加え、撮影した写真と、フィルターで加工した写真を上下に並べて表示するようにします。そのため、ビューコントローラーの中には、それぞれの画像を表示するためのcameraViewとfilterViewという2つのUIImageViewを配置しました。
前回のプログラムに手を加えて、撮影した写真と、フィルターで加工した写真を並べて表示できるようにします。そのために、2つのUIImageViewを用意します。また、再撮影ができるようにボタンも追加します
前回のプログラムでは、表示の縦横比のことはまったく考えていなかったので、実際に試された方はお気づきでしょうが、撮った写真がかなり縦長に表示されていました。今回は、あとでビューの縦横比をカメラ画像のものに合わせるので、そのままでも良いのですが、各ビューのcontentModeをscaleAspectFillに設定しています。それによって、縦横比を維持しつつ、ビューに対して隙間なく画像を埋め込むようにしています。
また今回は、いったん撮影してフィルターの効果を確かめたあとで、写真を撮り直して次々と効果を試せるように、「再撮影」ボタンも設けます。このボタンをタップすると、同じビューコントローラー内のtakePhotoメソッドが呼ばれるようにしています。そのメソッドによってUIImagePickerControllerに切り替えて写真を撮影するのです。
いつものようにUIコンポーネントのレイアウトは、viewWillLayoutSubviewsメソッドの中で設定しています。
2つのイメージビューの幅は、ビュー全体の4分の3になるようにしています。両側に8分の1ずつのスペースが空きます。イメージビューの縦横比は、iPadのカメラ画像に合わせた1.31：1としました
ここでは2つのイメージビューを、適当な間隔で縦に2つ並べ、その下にボタンを配置しました。ビューの縦横比は、カメラ画像にだいたい合わせて、1.31：1にしています。また画像を縦に2つ、余裕を持って並べられるように、画像の幅はビューの幅の4分の3となるようにしています。
写真を撮影して戻ってくるdidFinishPickingMediaWithInfoメソッドの中では、とりあえず上のビューに撮影した画像を表示したあと、フィルター処理を実行するfilterImageメソッドを呼び出しています。
takePhotoメソッドは、最初に初期設定が済んだ後と、「再撮影」ボタンがタップされると呼ばれます。中身は、前回のプログラムではviewDidLoadメソッドの中で実行していた、写真を撮影するための処理を、そのまま移設しただけです。
実際のフィルター処理は、filterImageメソッドの中のたった5行で済んでいます。実際には、フィルター処理を実行せよという命令は不要で、必要なパラメータを設定し終わったら、出力画像を読み出すだけです
つまり、UIImagePickerControllerのオブジェクトを作成し、必要なプロパティを設定してから、ナビゲーション機能を利用して、そのビューコントローラーに切り替えます。
今回の主題のCore Imageのフィルター処理は、filterImageメソッドの中で実行しています。と言っても、全部でたった５行で済んでいます。まず、1.フィルターに入力するソース画像をCIImageタイプに変換、2.フィルターの種類としてCIComicEffectを選び、3.その唯一のパラメータとして、ソース画像を設定、4.フィルター処理した結果をローカルな定数dstImageに代入、5.その結果をUIImageタイプに変換してビューのimageプロパティに設定——と、これだけです。
実際に動かしてみると、前回と同じようにカメラ撮影画面が表示されるので、シャッターボタンをタップし、「写真を使用」をタップすると、元の写真とフィルター処理した写真が縦に並んで表示されます。
前回と同じようにiPadのカメラで写真を撮ると、その画像と、それにマンガ効果をかけた画像が縦に並んで表示されます。写真によっては、かなりそれっぽい効果が得られるでしょう。「再撮影」をタップして、何度でも試してください
ここで「再撮影」をタップすれば、再びカメラが起動して写真を撮り直すことができます。その後は、最初と同じことが繰り返され、元の写真とフィルター加工後のマンガ風の画像が縦に並べて表示されます。
次回の予定
今回は、膨大な種類があるCore Imageフィルターの中から、たった1つ、CIComicEffectを試してみました。これは入力画像以外にパラメータの設定が必要のないという点で単純なものでした。次回は、パラメータの値をスライダーで設定して、効果の違いが目に見えるようなフィルターを試してみます。さらに複数のフィルターを切り替えられるようにしてみるつもりです。
