Cordova-カメラ

このプラグインは、写真の撮影や画像ギャラリーのファイルの使用に使用されます。

手順1-カメラプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*ウィンドウで次のコードを実行します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

ステップ2-ボタンと画像の追加

次に、カメラを呼び出すためのボタンと、撮影した画像が表示される img を作成します。これは、 div class = "app" 要素内の indexl に追加されます。

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

手順3-イベントリスナーの追加

イベントリスナーが onDeviceReady 関数内に追加され、使用を開始する前にCordovaが確実にロードされます。

document.getElementById("cameraTakePicture").addEventListener
   ("click", cameraTakePicture);

ステップ4-関数の追加（写真を撮る）

イベントリスナーへのコールバックとして渡される cameraTakePicture 関数を作成します。ボタンがタップされると発生します。この関数内で、プラグインAPIによって提供される navigator.camera グローバルオブジェクトを呼び出します。写真の撮影が成功した場合、データは onSuccess コールバック関数に送信されます。そうでない場合、エラーメッセージ付きのアラートが表示されます。このコードを index.js の下部に配置します。

function cameraTakePicture() {
   navigator.camera.getPicture(onSuccess, onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL
   });

   function onSuccess(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }
}

アプリを実行してボタンを押すと、ネイティブカメラがトリガーされます。

Cordova Camera Take Picture

写真を撮って保存すると、画面に表示されます。

Cordovaカメラ表示画像

同じ手順を使用して、ローカルファイルシステムからイメージを取得できます。唯一の違いは、最後の手順で作成された関数です。 sourceType オプションパラメータが追加されていることがわかります。

ステップ1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

ステップ2 B

<button id = "cameraGetPicture">GET PICTURE</button>

ステップ3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

ステップ4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

2番目のボタンを押すと、カメラの代わりにファイルシステムが開くので、表示する画像を選択できます。

Cordovaカメラファイルシステム

このプラグインは、カスタマイズのための多くのオプションパラメータを提供します。

S.No	Parameter & Details
1	quality 0〜100の範囲の画像の品質。デフォルトは50です。
2	destinationType DATA_URL* または 0 base64エンコード文字列を返します。 FILE_URI または 1 画像ファイルURIを返します。 NATIVE_URI または 2 画像のネイティブURIを返します。
3	sourceType PHOTOLIBRARY* または 0 写真ライブラリを開きます。 CAMERA または 1 ネイティブカメラを開きます。 SAVEDPHOTOALBUM または 2 保存したフォトアルバムを開きます。
4	allowEdit 画像編集を許可します。
5	encodingType JPEG* または 0 JPEGエンコード画像を返します。 PNG または 1 PNGエンコードされた画像を返します。
6	targetWidth ピクセル単位の画像スケーリング幅。
7	targetHeight ピクセル単位の画像スケーリングの高さ。
8	mediaType PICTURE* または 0 画像の選択のみを許可します。 VIDEO または 1 ビデオの選択のみを許可します。 ALLMEDIA または 2 すべてのメディアタイプを選択できます。
9	correctOrientation 画像の向きを修正するために使用されます。
10	saveToPhotoAlbum 画像をフォトアルバムに保存するために使用します。
11	popoverOptions IOSでポップオーバーの場所を設定するために使用されます。
12	cameraDirection FRONT* または 0 フロントカメラ。 BACK または 1 バックカメラ。 ALLMEDIA

Cordova-camera

目次