Ionic/Angular JS - 使用ngCordova Camera Plugin選擇它後顯示圖片

我正在開發一個使用Ionic/Angular JS的應用程序。在我使用ngCordova Camera Plugin的特定頁面中，用戶可以從手機的圖庫中選擇圖片。 現在，我不知道如何在應用程序用戶選擇圖片後在頁面中顯示圖片。下面是HTML代碼：Ionic/Angular JS - 使用ngCordova Camera Plugin選擇它後顯示圖片

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

這裏是我使用的特定選項卡控制器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); 

})

有人能幫助我嗎？

來源

2016-11-23 Andrei

不確定您是否需要eventListener，ngclick會相應地處理事件。另外，或者我認爲Ionic可能有一個點擊事件。 – alphapilgrim

我用科爾多瓦（離子）很久以前的事，但我想你必須在你的代碼:)

在功能「然後」你獲取圖像的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>

來源

2016-11-23 22:53:18

任何想法如何將imageData傳遞到文本字段，以便我可以提交包含圖像的表單？ – Andrei

您可以擁有一個佔位符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); 

})

來源

2016-11-23 23:01:15 alphapilgrim

您必須添加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); 
})

希望它會幫助你！

來源

2016-11-24 04:39:53

Ionic/Angular JS - 使用ngCordova Camera Plugin選擇它後顯示圖片

回答

相關問題