相機插件無法在離子狀態下工作

-1

我想使用相機插件和離子文件上傳方式拍照。但是，當我點擊按鈕時，它不起作用。我看着控制檯，沒有錯誤。相機插件無法在離子狀態下工作

查看：

<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; 
      } 
     } 
    })

所有幫助表示讚賞。我是新手。

來源

2016-11-21 Faizah Pratiwi

首先安裝攝像頭使用下面的命令插件，

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 
     }); 
    } 
})

希望這會幫助你！

來源

2016-11-21 09:21:12

您在工廠中沒有使用$ cordovaCamera，也沒有使用所有imageOptions，請參閱ngCordova Camera Plugin官方文檔。 Here

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

請使用正確的NG-點擊功能與控制器綁定。

來源

2016-11-21 09:26:59 Dev

使用以下簡單的控制器來查看它是否工作。另外不要忘記安裝Cordovacamera插件。我沒有看到使用任何插件科爾多瓦

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 
     }); 
    } 
});

使用下面的代碼你的代碼到您的index.html

<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>

來源

2016-11-21 09:28:32 sam

相機插件無法在離子狀態下工作

回答

相關問題