Question

我有一个Ionic项目，我需要Cordova Camera插件（我现在已成功安装）。但在我的项目中，Camera API仍然无法使用，即我收到错误：

ReferenceError: Camera is not defined
at Scope.$scope.takePic

如何激活在Ionic项目中使用的插件API？关于此的文档似乎是相当不存在或非常隐蔽。

Answer 1

请按照以下步骤操作：

<强> 1。在cordova.js

之前加入ngCordova

您可以找到相同的说明in the docs。

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

<强> 2。在命令行上添加插件

您可以在文档in the section of your specific plugin中找到此步骤。

ionic plugin add org.apache.cordova.camera

第3。请记住，在浏览器中工作时无法使用cordova

因此，当使用$cordovaCamera.getPicture时，库在内部调用navigator.camera.getPicture，这在桌面浏览器中进行开发时不可用。 Further reading

ngCordova / Ionic团队目前working on mocks可以用来避免这样的问题。

您可以在此处下载ngCordova：http://ngcordova.com/docs/install/

更新：现在有Ionic Native，就像ngCordova，但是对于ES6和TypeScript。

Answer 2

在应用的根目录中打开终端，然后通过

添加插件

cordova plugin add org.apache.cordova.camera

修改：
新命令是：

cordova plugin rm cordova-plugin-camera //remove cordova plugin add cordova-plugin-camera //add

Answer 3

我试图弄清楚如何使用Ionic自己的标准Cordova插件，但离子团队最近刚刚建立了ngCordova - 一个用于常见cordova API的角度包装器，其中包括您想要使用的Camera api。建议使用它：有关详细信息，请参阅their docs。

Answer 4

在浏览器上测试时，这是一个常见问题： http://ngcordova.com/docs/common-issues/

Answer 5

您需要将Camera注入控制器，如下所示：

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

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

此外，您需要在services.js中添加工厂：

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

Answer 6

您可以通过运行安装插件：

$ cordova plugin add org.apache.cordova.camera

现在您已经安装了插件，您可以使用Javascript中的相机API：

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

这将提示用户拍摄照片，并返回图像的本地网址，然后您可以在标记内使用该图像或用作CSS背景图像。

你可以使用下面的代码在Camera插件上使用一个简单的包装器，这样可以很容易地异步抓取照片：

module.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;
    }   } }]);

此工厂可以在您的控制器中使用，如下所示：

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

  $scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
    }, function(err) {
      console.err(err);
    });
  };

调用getPhoto（）时会打开相机（例如，点击按钮）。

根据您从Camera请求数据并在Angular标记中使用它的方式，您可能必须将图像URL列入白名单，以便Angular允许使用file：// URL（例如，如果您使用ng-src进行标记）：

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})

Answer 7

转到项目目录。

运行此命令：

$离子集成使cordova --quiet

（希望这对其他人有帮助。）

Ionic / Cordova：如何将Cordova插件集成到现有的Ionic项目中？

7 个答案: