2013/07/17更新

[XCODE] 複数のUIImageを結合して、1枚のUIImageを生成する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
本日はかなりマイナーネタですが、UIImageを結合する実装方法をブログに書きたいと思います。

画像



UIImageを結合する処理とは

複数のUIImageを結合する処理とは、複数のUIImageを結合して1枚のUIImageにしたいというお話です(そのままですね。。)。
この処理が必要になった場面としては、Objective-Cでスクリーンショットを取得する方法のブログで言及した内容で、「スクリーンショットを取得した際に、ステータスバー部分の画像が取得できない。なので、ステータスバー部分は別画像として用意しておいて、スクリーンショット画像と合成する」というお話でした。

今回の実装では、以下のスクリーンショット画像と、ステータスバー画像を合成します。

(スクリーンショット画像)
画像


(ステータスバー画像)
画像



合成する処理

合成する処理は簡単で、以下のように合成したいUIImageを順番に、Contextにレンダリングしていくことで、合成画像を生成することが出来ます。

// 必要なライブラリをインポートします
#import <CoreGraphics/CoreGraphics.h>
#import <QuartzCore/QuartzCore.h>

// スクリーンショットの画像と、ステータスバーの画像
UIImage *capturedImage = /*上記の実装で取得した画像*/
UIImage *statusBar = [UIImage imageNamed:@"status_bar"];

// 合成したいサイズを指定して、描画を開始します
UIGraphicsBeginImageContext(CGSizeMake(capturedImage.size.width, capturedImage.size.height));

// まずは最下位レイヤーにしたいスクリーンショット画像をレンダリングします。
[capturedImage drawAtPoint:CGPointMake(0, 0)];

// 次にステータスバーをレンダリングします。
[statusBar drawAtPoint:CGPointMake(0, 0)];

// 上記2枚を描画した内容をUIImageとして受け取ります。
capturedImage = UIGraphicsGetImageFromCurrentImageContext();

// 描画を終了します。
UIGraphicsEndImageContext();
そしてこの実装の結果、以下のような画像が生成できます。
画像
これで合成画像を作成する実装が完了です。



最後に

UIImageに関する処理は、Tipsとして色々と蓄積できると良いですね! このブログでもUIImage関連で以下のような記事を記載しておりますので、ご参考になれば幸いです。

- UIImageから任意の部分の画像を切り取る方法
- UIImageを任意のサイズにリサイズする方法
- UIImageをPNGファイルとして保存する方法

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。