画像ファイルの選択方法

Cordovaアプリで画像を選択する場合、以下のようにいくつか方法があります。

• input type="file"コントロール
• cameraプラグインのgetPictureメソッド
• ImagePickerプラグインのgetPicturesメソッド

このうち、input type="file"コントロールはAndroidのバージョン（4.4.0 - 4.4.2）によってはバグで使えず、cameraプラグインのgetPictureメソッドは選択候補の一覧にGoogleドライブに保存された画像も表示されるのですが、その画像を選択してもアプリ上では表示できず、ローカル端末に保存された画像を選んでも、ものによってはURLをリプレイスしないと表示できません。

そういったこともあり、Cordovaアプリで画像選択をするならImagePickerプラグインを利用するのが一番簡単そうで、以下のコードはImagePickerプラグインを利用したサンプルです。

こちらを参照。

下記は画像１件を選択する場合のサンプルコードです。

// 画像の選択処理開始
$scope.onSelectImage = function() {
    selectImage();
}

// 画像の選択
function selectImage() {
    window.imagePicker.getPictures(selectImageSuccess, selectImageFail,
        {
            maximumImagesCount: 1,
            width: 400,
            height: 400,
            quality: 50
        }
    );
}

// 画像の選択成功
function selectImageSuccess(results) {
    if (results.length > 0) {
        for (var i = 0; i < results.length; i++) {
            $scope.imageUrl = results[i];
        }
    } else {
        // 未選択時の処理
    }
}

// 画像の選択エラー
function selectImageFail(error) {
    console.log(error);
}

10行目の「maximumImagesCount」で選択可能な件数を設定。

11、12行目の「width」と「height」で画像のサイズを設定。（アップロードする場合、ここで指定した画像サイズでサーバにアップロードされます。）

Android6.0でImagePickerプラグインのgetPicturesメソッドを実行すると、画像選択のウィンドウが起動しませんでした。

どうやらパーミッション関連でエラーが出ているようで、画像選択のメソッドを呼び出す前にパーミッションの確認が必要みたいです。

まず、こちらを参考にパーミッション確認用のプラグインを入れます。

続いて、上記サンプルコードの「onSelectImage」を以下のように変更して、先にパーミッションのチェックを行います。

$scope.onSelectImage = function() {
    if (cordova.platformId === 'android') {
        var permissions = cordova.plugins.permissions;
        permissions.hasPermission(
            permissions.READ_EXTERNAL_STORAGE,
            function (status) {
                if (!status.hasPermission) {
                    permissions.requestPermission(
                        permissions.READ_EXTERNAL_STORAGE,
                        function (status) {
                            if (status.hasPermission) {
                                selectImage();
                            }
                        },
                        selectImageFail);
                } else {
                    selectImage();
                }
            },
            null);
    } else if (cordova.platformId === 'ios') {
        selectImage();
    }
}

上記のコードは、OSの種類がAndroidであれば、最初にパーミッションを所持しているかどうか確認し（permissions.hasPermission）、所持していないのであれば、ユーザーにアクセスしていいかどうか確認を行っています（permissions.requestPermission）。

「READ_EXTERNAL_STORAGE」のパーミッションをすでに所持またはユーザーの確認によって許可された場合のみ、Image PickerプラグインのgetPicturesメソッドが呼び出されるといった流れになっています。

またiosの場合ですが、上記のコードで動作するかどうか未確認です。（確認が取れ次第、記事を更新しておきます。）

• andriod Marshmallow- call imagePicker.getPictures : error while executing doInBackground · Issue #148 · wymsee/cordova-imagePicker · GitHub