离子科尔多瓦相机不工作 [英] Ionic Cordova Camera not working

问题描述

我正在使用以下 Git(请参阅此处的代码) 作为 Phonegap Build 和已在我的手机上正确安装了该应用(iOS).

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.

有人可以向我解释什么不起作用吗?该教程来自 Ionic 网站.

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

替代方案:有人有可用的 .git 或 phonegap 代码吗?

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

推荐答案

好吧，我想通了，这完全是为了正确设置 config.xml！

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

这里概述了如何使用 Ionic 和 Phonegap Build 构建示例相机应用

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

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

2.安装 Ionic 并启动一个项目(此处:选项卡)

npm install -g cordova ionic
ionic start myApp tabs 

2a.cd myApp

2b.可选，添加插件(如果在浏览器或模拟器上测试)

cordova plugin add org.apache.cordova.camera

3.cd www

4.通过 Bower 安装或在/lib 中解压 ngCordova

bower install ngCordova

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

在 index.html 中添加

In index.html add

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

之前

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

6.在 app.js 中添加 'ngCordova' 作为依赖

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) {
            // An error occured. Show a message to the user
        });
    }

});

8.使用 .html 中的控制器(不要忘记在 app.js 中添加带有 ExampleCtrl 的 state tab.example)

<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.添加适当的 config.xml.使用此模板:

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

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