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

コピペでつくれる合成カメラアプリ。

More than 5 years have passed since last update.

用意したグラフィックとの合成写真が撮影できるアプリが急遽必要になったのでつくってみました。
その際に作成したアプリのソースを記録しておこうとおもいます。

以下の3ステップで動作すると思うので、
もしも必要になった方がいれば、ご自由にご利用ください。

  1. Titaniumで新規プロジェクトを作成
  2. Resources/app.jsに下記コードをコピペ
  3. Resources/img/以下に camera.png と graphic.png を用意する
app.js
// iOS6.1.3のiPhone5でしか動作確認しておりません。

(function() {
    "use strict";

    var win           = Ti.UI.createWindow(),
        // カメラ起動ボタン
        button        = Ti.UI.createButton({
            top:             444,
            width:           50,
            height:          50,
            backgroundImage: "img/camera.png"
        }),
        cameraManager = new CameraManager;

    // 初回はカメラを自動的に起動
    cameraManager.showCamera();

    button.addEventListener("click", cameraManager.showCamera);

    win.add(button);
    win.open();

    // CameraManager Class
    function CameraManager() {
        var graphic, overlay;

        function showCamera() {
            // 合成するグラフィック(位置・サイズは適当です)
            graphic   = Ti.UI.createImageView({
                top:    265,
                width:  300,
                height: 210,
                image:  "img/graphic.png"
            }),
            overlay   = Ti.UI.createView();

            overlay.add(graphic);

            Ti.Media.showCamera({
                success:     handleSuccess,
                cansel:      handleCansel,
                error:       handleError,
                mediaTypes:  Ti.Media.MEDIA_TYPE_PHOTO,
                // オーバーレイ画像の設定
                overlay:     overlay,
                // アスペクト比の保持
                transform:   Ti.UI.create2DMatrix().scale(1)
            });
        }

        function handleSuccess(evt) {
            // カメラで撮影した画像をリサイズしたイメージビュー
            var imageView = Ti.UI.createImageView({
                    top:    10,
                    // アスペクト比を保持したまま画面内に収まるサイズにリサイズ
                    width:  318,
                    height: 424,
                    image:  evt.media
                });

            // グラフィックの位置を適当に移動(本来不要な処理)
            graphic.top = imageView.height - graphic.height;
            imageView.add(graphic);

            // カメラロールに保存
            imageView.toImage(function (evt) {
                Ti.Media.saveToPhotoGallery(evt.blob);
            });

            win.add(imageView);
        }

        function handleCansel(evt) {
            ;
        }

        function handleError(evt) {
            // カメラの起動に失敗した際のアラート
            alert("ERROR");
        }

        return {
            showCamera : showCamera,
        };
    }
})();

いかんせん超特急でつくったアプリだったので、
撮った写真をカメラロールに保存するという必要最低限の機能しか持たせてません。
また、カメラを起動している際と実際に保存される画像の合成位置に若干のズレが発生します。
そんなこんなですが、いつかどこかでこのソースが誰かの役に立つときがきてくれれば幸いです。

kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.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