Cordova 相机 - 离子答案

【问题标题】：Cordova Camera - IonicCordova 相机 - 离子
【发布时间】：2017-01-26 01:33:38
【问题描述】：

近 2 天以来，我一直在寻找解决方案。我正在尝试使用 ngCordova 相机插件。

我在 AngularJS 中使用 ionic-yeoman 框架。

我所做的是：

bower install --save ngCordova.

将ngCordova 添加到我的app.module。安装了cordova相机插件：

cordova plugin add org.apache.cordova.camera.

我的控制器：

.controller('profileCtrl', function($scope, myService, $cordovaCamera)
{
  $scope.takePicture = function() {
    var options = { 
        quality : 75, 
        destinationType : Camera.DestinationType.DATA_URL, 
        sourceType : Camera.PictureSourceType.CAMERA, 
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 100,
        targetHeight: 100,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      // Success! Image data is here
    }, function(err) {
      // An error occured. Show a message to the user
    });
  }

  myService.getFoo().then(function(data) {
   //this will execute when the 
   //AJAX call completes.
   $scope.items = data;
  });
})

我得到这个错误：ReferenceError: Camera is not defined

【问题讨论】：

当您在浏览器上时，cordova 的功能不可用，只能在已部署的应用程序或模拟器中使用。

标签： android angularjs cordova yeoman ionic-framework

【解决方案1】：

如果您通过浏览器 为您的应用程序提供服务，那么无论您在设备使用方面使用cordova，都不起作用。但是，如果您在模拟器或设备本身中提供您的应用程序之后仍然遇到问题。请尝试以下步骤。

首先，查看cordova插件列表：

进入项目目录类型：cordova plugin lists

查看cordova-plugin-media-capture、cordova-plugin-camera（如果这些不在列表中，您只是缺少插件）。运行命令 cordova plugin add cordova-plugin-media-capture 和 cordova plugin add cordova-plugin-camera
如果插件在那里并且您仍然遇到相机未定义的问题
- cordova plugin rm cordova-plugin-camera
- cordova plugin rm cordova-plugin-media-capture
- ionic platform rm android
- ionic platform add android
- cordova plugin add cordova-plugin-camera
- cordova plugin add cordova-plugin-media-capture

以下内容必须存在于您的 index.html 中

 <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

【讨论】：

【解决方案2】：

您应该确保在您的 html 中包含ng-cordova.js 文件（来自ngCordova/dist/文件夹）在cordova.js 文件之前。

【讨论】：

【解决方案3】：

确保在控制器声明中也包含 ngCordova。因为我分别保存了我的控制器和 app.js 文件，并且没有在 angular.module('xx.controllers', ['ionic','ngCordova']) 中包含 ngCordova。一旦我这样做了，我的问题就解决了，我可以在 genymotion 中运行应用程序

【讨论】：

【解决方案4】：

刚刚通过分析Ionic Camera example project 发现了这一点。您已正确完成所有设置，但仍需要将其注入控制器，如下所示：

.controller('MyCtrl', function($scope, Camera) {

请注意，Camera 之前没有美元符号。这确实应该更明确地记录下来。

另外，如果您还没有这个工厂，请添加它：

.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }
  }
}])

【讨论】：

不，这叫工厂

【解决方案5】：

只需尝试 ionic run browser 而不是 ionic serve

【讨论】：