cordova-plugin-camera で写真を撮ったりカメラロールから写真をアップさせたりする

今更ながらこんな初歩的な Cordova プラグインを紹介。

cordova-plugin-camera は、カメラ撮影ができるプラグイン。単純にカメラを起動するだけでなく、撮影した画像をその場でリサイズ・圧縮したり、カメラロールから画像を選択させたりすることができる。画像を Data URL 形式で受け取ることもできるので、テキストデータとしてフォーム送信させたりすることもできる。

• GitHub - apache/cordova-plugin-camera: Mirror of Apache Cordova Plugin camera

プラグインのインストール

では早速プラグインをインストール。

$ cordova add cordova-plugin-camera

写真を撮影するボタンを作ってみる

HTML 側は省略。ボタンを押すとカメラを起動し、撮影された写真をリサイズして Data URL 形式で取得するコードを書いてみる。

window.navigator.camera.getPicture((imageData) => {
  // JPG 画像を Data URL 形式で受け取るので、Data URL のヘッダを付けて img 要素の src 属性値に設定して画面表示させてみる
  document.getElementById('img').src = 'data:image/jpeg;base64,' + imageData;
}, (error) => {
  // カメラを起動後、キャンセルしてカメラ画面を閉じた場合などにもエラーコールバックに入るので、ココでは特にハンドリングしないでおく
  console.log(error);
}, {
  // 各種設定
  // 画像の取得元
  sourceType: window.navigator.camera.PictureSourceType.CAMERA,
  // 画質 : 0 〜 100 (高画質)
  quality: 80,
  // 撮影後の写真のサイズ指定
  targetWidth: 640,
  targetHeight: 480,
  // JPG でエンコードする
  encodingType: window.navigator.camera.EncodingType.JPEG,
  // 撮影した画像の編集をさせない
  allowEdit: false,
  // 撮影した画像をどんな形式で受け取るか : Data URL で受け取ることにする
  destinationType: window.navigator.camera.DestinationType.DATA_URL
});

オプションは全てではなく、設定値によって組み合わせがある。

window.Camera (パスカルケース) は定数の類のみ持っている。window.navigator.camera (キャメルケース) は getPicture() などの関数と定数を両方持っている (なんでこんな仕様なんだろう？)。定数であれば window.Camera.MediaType.JPEG としても window.navigator.camera.MediaType.JPEG としてもどちらでも良い。

Data URL 形式で画像を受け取るようにすると、写真を撮影してもカメラロールに保存されないので、ユーザのカメラロールを汚さずに写真撮影してもらうことができる。上述の例では #img な要素の src 属性に Data URL を設定して画面表示するようにしたが、FormData に append() したりしても良いだろう。

カメラロールから画像を取得する際は sourceType で SAVEDPHOTOALBUM を選ぶと良いだろう。mediaType を VIDEO や ALLMEDIA に指定すれば、動画ファイルを選ばせることもできる。ただし動画ファイルの場合は destinationType が NATIVE_URI となり、ファイル URL を返されることになるので注意。

また、カメラ撮影しつつ、FILE_URI で受け取るようにした場合は、アプリ内の一時ディレクトリに画像が保存されるので、よきタイミングで cleanup() を実行して画像ファイルのキャッシュを削除してやる必要がある。

window.navigator.camera.cleanup(() => {
  console.log('Cleanup Success');
}, (error) => {
  console.log('Cleanup Failed : ' + error);
});

簡単な API だが色々なインプット・アウトプット方法があるので、色々な使い方ができるだろう。