カメラプラグインがイオン性で動作しません

Question

写真を撮るためにカメラプラグインとファイルアップロードをionicで使用したいと思います。しかし、ボタンをクリックしても機能しません。私はコンソールを見て、エラーはありません。

ビュー：

<button class="button button-full button-assertive" ng-click="takePhoto">Take Photo</button> 
<button class="button button-full button-assertive" ng-click="choosePhoto">Choose Photo</button> 
<img ng-src="{{user.picture}}"> 

アプリ：すべてのヘルプは高く評価され

angular.module('starter', ['ionic','ngCordova']) 

.controller('MainController', ['Camera', function($scope, Camera){ 
    $scope.getPicture = function(options){ 
     var options = { 
      quality : 75, 
      targetWidth : 200, 
      targetHeight : 200, 
      sourceType : 0 
     }; 

     Camera.getPicture(options).then(function(imageData){ 
      $scope.picture = imageData; 
     }, function(err){ 
      console.log(err); 
     }); 
    }; 

    $scope.takePicture = function(options){ 
     var options = { 
      quality : 75, 
      targetWidth: 200, 
      targetHeight: 200, 
      sourceType: 1 
     }; 
     Camera.getPicture(options).then(function(imageData){ 
      $scope.picture = imageData; 
     }, function(err){ 
      console.log(err); 
     }); 
    } 
}]) 

.factory('Camera', function($q){ 
     return { 
      getPicture: function(options) { 
      var q = $q.defer(); 

      navigator.camera.getPicture(function(result) { 
       q.resolve(result); 
      }, function(err) { 
       q.reject(err); 
      }, options); 

      return q.promise; 
      } 
     } 
    }) 

。 私は初心者です。

Answer 1

まず、次に、以下のコマンドを使用してプラグイン

cordova plugin add cordova-plugin-camera 

をカメラをインストールするHTMLファイル

、カメラから写真を撮るために、次のコードを実装しようと、

<ion-content> 
    <button class="button button-full button-assertive" ng-click="takePhoto">Take Photo</button> 
    <img ng-src="{{ImagePath}}" style="width:250px;height:250x;"/><br/> 
<ion-content> 

コントローラ：

app.controller('MainCtrl', function($scope){ 
    $scope.takePhoto = function() { 
     navigator.camera.getPicture(function(imageURI) 
     { 
      $scope.ImagePath = imageURI; 
     }, function(err) { 
      // Ruh-roh, something bad happened 
     },{quality: 50, 
      destinationType: Camera.DestinationType.FILE_URI, 
      encodingType: Camera.EncodingType.JPEG, 
      targetWidth: 300, 
      targetHeight: 300 
     }); 
    } 
}) 

これはあなたを助けますか？

Answer 2

工場で$ cordovaCameraを使用していないだけでなく、すべてのimageOptionsも使用していない場合は、ngCordova Camera Pluginの公式ドキュメントをご覧ください。 Here

<button class="button button-full button-assertive" ng-click="takePictures">Take Photo</button> 

コントローラとバインドするには、適切なng-click機能を使用してください。

Answer 3

以下のシンプルなコントローラを使用して動作するかどうかを確認します。また、Cordovacameraプラグインをインストールすることを忘れないでください。私は

<ion-content ng-controller="MainCtrl"> 
     <img ng-src="{{srcImage || 'img/dummy.jpg'}}" id="srcImage" width="250 " 
      height="250" style="display: block; margin: 0 auto;"/><br/> 
     <button class="button button-full button-positive " ng-click="takeImage() ">Take Image</button><br/> 
    </ion-content> 

あなたのindex.htmlにコードを次

app.controller('MainCtrl', function($scope, $cordovaCamera) { 
$scope.takeImage = function() { 
     var options = { 
      quality: 80, 
      destinationType: Camera.DestinationType.DATA_URL, 
      sourceType: Camera.PictureSourceType.CAMERA, 
      allowEdit: true, 
      encodingType: Camera.EncodingType.JPEG, 
      targetWidth: 250, 
      targetHeight: 250, 
      popoverOptions: CameraPopoverOptions, 
      saveToPhotoAlbum: false 
     }; 

     $cordovaCamera.getPicture(options).then(function(imageData) { 
      $scope.srcImage = "data:image/jpeg;base64," + imageData; 
     }, function(err) { 
      // error 
     }); 
    } 
}); 

すべてのコルドバのプラグインを使用して使用してコードを参照してくださいいけません