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

Question

我正在使用 Ionic / Angular JS 开发应用程序。在特定页面中，我使用 ngCordova Camera Plugin 允许用户 select 来自 phone 画廊的图片。 现在，我不知道如何在应用程序用户select发送图片后在页面中显示图片。这里是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 (ionic)，但我想你的代码中有答案:)

在函数“.then”中，您正在获取图像 html 元素

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

并注入真实图片源uri

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

所以你只需要在你的 html 代码 img 元素中添加正确的 id:

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

Answer 2

你可以有一个占位符 img 标签，并检查它是否有源或者不费心占用 space，然后将范围 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 选择后显示图片

Ionic / Angular JS - Display Picture after selecting it using ngCordova Camera Plugin

angularjs

ionic-framework

cordova-plugins

ngcordova