Question

我正在尝试使用相机。我搜索了一个例子或指南，但我找不到任何东西。

我想做的是只需按一下按钮打开相机，拍照并显示图像 - 全部使用离子和角度。

Answer 1

这就是我做的事情

的index.html：

<ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>


<ion-content class="has-header contentPadding"> 

     <div class="form-group padding-top">                   
          <button class='button button-positive' data-ng-click="takePicture()">
            {{text.buttonTitle}}
          </button> 
      </div>

      <div class="item item-image">
            <img ng-src="{{cameraPic}}"/>
      </div>                    

</ion-content>

控制器：

 $scope.takePicture = function(){   
        var cameraOptions = {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL                
         };
        var success = function(data){
        $scope.$apply(function () {
             /*
               remember to set the image ng-src in $apply,
               i tried to set it from outside and it doesn't work.
             */
               $scope.cameraPic = "data:image/jpeg;base64," + data;
             });
         };
        var failure = function(message){
             alert('Failed because: ' + message);
        };
        //call the cordova camera plugin to open the device's camera
        navigator.camera.getPicture( success , failure , cameraOptions );            
    };

Answer 2

也许这可以帮到你：Ionic Cordova Example

立即可用于Phonegap Build！

Answer 3

感谢@AMG发布了Ionic Camera example project的链接。我对它进行了分析，发现我们需要将Camera注入控制器，如下所示：

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

离子/科尔多瓦相机为angularJS的新手

3 个答案: