Ionic / Angular JS — отображать изображение после его выбора с помощью плагина камеры ngCordova

Я разрабатываю приложение с использованием Ionic/Angular JS. На определенной странице я использую плагин ngCordova Camera, чтобы позволить пользователям выбирать изображение из галерея телефона. Теперь я не знаю, как отобразить изображение на странице после того, как пользователь приложения выберет изображение. Вот код 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);

})

Кто-нибудь может мне помочь?


cordova-plugins ionic-framework angularjs ngcordova
person Ganikkost    schedule 23.11.2016    source источник
comment
Не уверен, что вам нужен eventListener, ngclick соответствующим образом обработает событие. Кроме того, в качестве альтернативы я думаю, что у Ionic может быть событие щелчка.   -  person alphapilgrim    schedule 24.11.2016

Ответы (3)


arrow_upward
2
arrow_downward

Я давно использовал кордову (ionic), но я полагаю, у вас есть ответ в вашем коде :)

в функции '.then' вы получаете HTML-элемент изображения

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

и вставка реального исходного изображения uri

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

Таким образом, вам нужно только добавить в свой HTML-код элемент img с правильным идентификатором:

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <img id="myImage"/>
</div>
person Michał Jarzyna    schedule 23.11.2016
comment
Любая идея, как я могу передать imageData в текстовое поле, чтобы я мог отправить форму, включая изображение? - person Ganikkost; 24.11.2016

arrow_upward
0
arrow_downward

Вы можете иметь тег 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);

})
person alphapilgrim    schedule 23.11.2016

arrow_upward
0
arrow_downward

Вы должны добавить тег 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);
})

Надеюсь вам поможет!!!

person S.M.Priya    schedule 24.11.2016