相机插件在离子中不起作用答案

【问题标题】：Camera plugin doesn't work in ionic相机插件在离子中不起作用
【发布时间】：2016-11-21 08:14:55
【问题描述】：

我想在 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;
          }
       }
    })

感谢所有帮助。我是新手。

【问题讨论】：

标签： javascript android angularjs ionic-framework

【解决方案1】：

您没有在工厂使用 $cordovaCamera，也没有使用所有的 imageOptions，请参阅 ngCordova Camera Plugin 的官方文档。 Here

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

请使用适当的 ng-click 功能与控制器绑定。

【讨论】：

【解决方案2】：

使用下面的简单控制器看看它是否有效。也不要忘记安装 Cordovacamera 插件。我没有看到您使用任何 cordova 插件的代码

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>

【讨论】：

【解决方案3】：

首先使用以下命令安装相机插件，

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

希望对你有帮助！！！！

【讨论】：