Help us understand the problem. What is going on with this article?

Swift2で写真を合成するiPhoneアプリを作ってみた

More than 3 years have passed since last update.

はじめに

iPhoneのカメラ機能を使って、あらかじめ用意したスタンプ画像と合成するアプリを作ってみました。どこを撮影しても小さなオジサンが写り込みます。笑

IMG_2130.JPG

完成イメージはこんな感じ(Youtube)です。Xcode7とSwift2での作り方を紹介します。

開発環境

Xcode 7.1
Swift 2.1
iOS 9.0
OS X v10.11

作り方

1.プロジェクトを作る

Xcodeから[iOS]-[Application]をクリックし、[Single View Application]を選択する。

1.png

2.スタンプ画像を用意する

PNG形式のスタンプ画像を用意する。背景は透過、サイズは320x426です。

13.png

3.スタンプ画像をプロジェクトに読み込む

Xcodeの[File]-[Add Files to プロジェクト名]をクリックし、スタンプ画像を選択する。

2.png

オプションの[Copy items if needed]にチェックを入れ、[Add]ボタンをクリックする。

3.png

4.アプリを縦画面のみに設定する

プロジェクト設定の[General]-[Deployment info]-[Device Orientation]にある、[Landscape Left]と[Landsape Right]のチェックを外す。

4.png

5.オートレイアウトを解除する

Xcodeの[Main storyboard]をクリックし、[Use Auto Layout]のチェックを外す。

5.png

ダイアログが表示されるので[Disable Size Classes]ボタンをクリックする。

6.png

6.コンポーネントを配置する

ViewControllerに[Image View]を配置する。サイズは幅320px、高さ426pxにする。

7.png

同じように[Button]を配置する。ボタンの表示文字列を[撮影]にする。

8.png

7.コンポーネントをプログラムに接続する

[Image View]をソースコードに[control]キーを押しながらドラッグし、Outletを作成する。ここでは[cameraImgView]とした。

9.png

同じように[Button]をドラッグし、[btnPushed]という名前のActionを作成する。

10.png

8.カメラを起動するプログラムを書く

UIViewControllerクラスにUIImagePickerControllerDelegateとUINavigationControllerDelegateクラスを継承させる。

UIImagePickerController型の変数を作成し、presentViewControllerメソッドでカメラ機能が立ち上がる。
引数に[UIImagePickerControllerSourceType.Camera]を指定することを忘れずに。

シャッターが押された際の動作は、imagePickerControllerメソッド内で指定できる。

11.png

ViewController.swift
import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var cameraImgView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func btnPushed(sender: AnyObject) {
        // ----- カメラを起動する
        let picker = UIImagePickerController()
        picker.sourceType = UIImagePickerControllerSourceType.Camera
        picker.delegate = self
        presentViewController(picker, animated: true, completion: nil)
    }

    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        cameraImgView.image = image                             // 撮影した画像をセットする

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

}

iPhoneアプリを起動してみるとこんな感じ。⇒ Youtube動画

9.スタンプ画像を合成して保存する

UIImage型の変数を定義して、スタンプ画像を読み込みます。
addSubviewメソッドで撮影した画像とスタンプ画像を合成します。

12.png

ViewController.swift
import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var cameraImgView: UIImageView!
    let stamp = UIImage(named: "ojisan.png")            // スタンプ画像

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func btnPushed(sender: AnyObject) {
        // ----- カメラを起動する
        let picker = UIImagePickerController()
        picker.sourceType = UIImagePickerControllerSourceType.Camera
        picker.delegate = self
        presentViewController(picker, animated: true, completion: nil)
    }

    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        let stampViews = cameraImgView.subviews
        for stampView in stampViews {
            stampView.removeFromSuperview()                     // スタンプをリセットする
        }
        cameraImgView.image = image                             // 撮影した画像をセットする
        cameraImgView.addSubview(UIImageView(image: stamp))     // スタンプ画像を合成する

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

}

10.合成した画像を保存する

合成した画像を保存するには、imagePickerControllerメソッドを次のように修正します。

ViewController.swift
    func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
        let stampViews = cameraImgView.subviews
        for stampView in stampViews {
            stampView.removeFromSuperview()                     // スタンプをリセットする
        }
        cameraImgView.image = image                             // 撮影した画像をセットする
        cameraImgView.addSubview(UIImageView(image: stamp))     // スタンプ画像を合成する

        // ----- 合成した画像を保存する
        UIGraphicsBeginImageContext(cameraImgView.bounds.size)
        cameraImgView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        UIImageWriteToSavedPhotosAlbum(UIGraphicsGetImageFromCurrentImageContext(), self, nil, nil)
        UIGraphicsEndImageContext()

        dismissViewControllerAnimated(true, completion: nil)    // アプリ画面へ戻る
    }

サンプルダウンロード

GitHubに完成品をアップロードしておいたので、どうぞご参考ください。
ダウンロード

参考サイト

iPhoneアプリ開発のためのSwiftレシピ

kawai_norimitsu
小さな会社やってます。
http://kawaidesu.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした