Question

我正在使用Ionic / Angular JS开发一个App。在特定页面中，我使用ngCordova Camera Plugin来允许用户从手机图库中选择图片。 现在，我不知道在应用用户选择图片后如何在页面中显示图片。以下是HTML代码：

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display"> <!-- Display Photo Here --> </div>
</div>

这是我用于特定标签的Controller JS：

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {

    document.addEventListener("deviceready", function () {

      $scope.selectPicture = function() {

        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
            correctOrientation: true
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          var image = document.getElementById('myImage');
          image.src = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
        });
      }

  }, false);

})

有人可以帮助我吗？

Answer 1

我很久以前就使用过cordova（离子），但我想你的代码已经回答了:)

在功能＆＃39;。然后＆＃39;你正在获取图像html元素

var image = document.getElementById('myImage');

并注入真实图像源uri

 image.src = "data:image/jpeg;base64," + imageData;

所以你只需要用正确的id：

添加你的html代码img元素

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <img id="myImage"/>
</div>

Answer 2

你可以有一个占位符img标签，并检查它是否有源或不打扰占用空间，然后将一个范围的var设置为新的图像源。

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display">
    <img ng-src="imageSource" alt="Description" ng-if="imageSource" />
  </div>
</div>

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {

  document.addEventListener("deviceready", function() {

    $scope.selectPicture = function() {

      var options = {
        quality: 90,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false,
        correctOrientation: true
      };

      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imageSource = "data:image/jpeg;base64," + imageData;
      }, function(err) {
        // error
      });
    }

  }, false);

})

Answer 3

您必须添加img标签才能显示图像。请查看以下内容，

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display">
      <img  ng-src="{{Viewimg}}" style="width:80%;height:350px;">
  </div>
</div>

控制器：

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {
    document.addEventListener("deviceready", function () {
      $scope.selectPicture = function() {
        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
            correctOrientation: true
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          $scope.Viewimg = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
        });
      }
    }, false);
})

希望它会帮助你!!!

Ionic / Angular JS - 使用ngCordova Camera Plugin选择后显示图片

3 个答案: