Ionic Cordova相机不工作 [英] Ionic Cordova Camera not working

问题描述

我正在使用以下 Git（请参阅此处的代码）作为Phonegap Build的输入，已在我的手机上正确安装了应用程序（iOS）。

应用程序正确打开，但当我尝试拍摄照片（点击按钮）它应该显示由相机拍摄的图像。

有人可以向我解释什么不工作吗？

另一种方法是：有人为phonegap准备一个有效的.git或代码吗？

这里是一个概述如何使用使用Ionic和Phonegap Build构建示例相机应用程序

1。安装NodeJS或转到c9.io（云环境）并启动一个NodeJs项目。如果需要，删除所有文件

2。安装Ionic并启动一个项目（此处：tabs）

  npm install -g cordova ionic 
启动myApp标签
  

2a。 cd myApp

2b。可选，添加插件（如果在浏览器或模拟器上测试）

  cordova插件添加org.apache。 cordova.camera 
  

3。 cd www

4。通过Bower安装或解压缩/ lib中的ngCordova

  bower install ngCordova 
  

5。在index.html中添加ngCordova引用

在index.html中添加

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

之前

 < script src =cordova.js>< / script> 
  

6。 in app.js add'ngCordova'as dependency

  angular.module（'starter'，['ionic' ，'starter.controllers'，'starter.services'，'ngCordova']）
  

< 7。写入控制器

  .controller（ExampleCtrl，function（$ scope，$ cordovaCamera）{
 
 $ scope.takePicture = function（）{
 var options = {
 quality：75，
 destinationType：Camera.DestinationType.DATA_URL，
 sourceType：Camera。 PictureSourceType.CAMERA，
 allowEdit：true，
 encodingType：Camera.EncodingType.JPEG，
 targetWidth：300，
 targetHeight：300，
 popoverOptions：CameraPopoverOptions，
 saveToPhotoAlbum：false 
}; 
 
 $ cordovaCamera.getPicture（options）.then（function（imageData）{
 $ scope.imgURI =data：image / jpeg; base64+ imageData; 
}，function（err）{
 //发生错误向用户显示消息
}）; 
} 
 
}）; 
  

8。在.html中使用控制器（不要忘记在app.js中使用ExampleCtrl添加状态tab.example）

 < ion-view view-title =Example> 
< ion-content> 
< img ng-show =imgURI！== undefinedng-src ={{imgURI}}> 
< img ng-show =imgURI === undefinedng-src =http://placehold.it/300x300> 
< button class =buttonng-click =takePicture（）>拍摄照片​​< / button> 
< / ion-content> 
< / ion-view> 
  

9。添加正确的config.xml。使用此模板：

https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

I am using exactly the following Git (see here the code) as an input for Phonegap Build and have installed the app on my phone correctly (iOS).

The app opens correctly but when I try to take a picture (clicking on the button) nothing happens. It should display the image that was taken by the camera.

Can someone explain to me what is not working? The tutorial is from the Ionic website.

Alternative: does someone have a working .git or code for phonegap?

解决方案

Oke so I figured it out, its all about setting up config.xml properly!

Here is an overview how to build a sample camera app with Ionic and Phonegap Build

1. Install NodeJS or go to c9.io (Cloud Environment) and start a NodeJs project. Delete all files if needed

2. Install Ionic and start a project (here: tabs)

npm install -g cordova ionic
ionic start myApp tabs 

2a. cd myApp

2b. optional, add the plugin (if testing in browser or on your simulator)

cordova plugin add org.apache.cordova.camera

3. cd www

4. Install through Bower or Unzip ngCordova in /lib

bower install ngCordova

5. Add the ngCordova reference in index.html

In index.html add

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

before

<script src="cordova.js"></script>

6. in app.js add 'ngCordova' as dependency

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

7. Write the controller

.controller("ExampleCtrl", function($scope, $cordovaCamera) {

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

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // An error occured. Show a message to the user
        });
    }

});

8. Use the controller in .html (don't forget to add a state tab.example with ExampleCtrl in app.js)

<ion-view view-title="Example">
  <ion-content>
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
    <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
    <button class="button" ng-click="takePicture()">Take Picture</button>
  </ion-content>
</ion-view>

9. Add the proper config.xml. Use this template:

https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

这篇关于Ionic Cordova相机不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！