如何使用cordova獲取手機的所有圖庫圖像？

Question

我想獲取一個移動設備的完整畫廊，以在自定義網格中顯示它們，這有可能嗎？現在我正在使用$cordovaImagePicker，它將我重定向到圖庫，然後在選擇圖像後獲取圖像的Uri。而不是我想要完整的畫廊圖像uri自動選擇。

Controller

$scope.getImageFromGallery = function() { 
    // Image picker will load images according to these settings 
    var options = { 
     maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example 
     width: 800, 
     height: 800, 
     quality: 80 // Higher is better 
    }; 

    $cordovaImagePicker.getPictures(options).then(function(results) { 
     // Loop through acquired images 
     for (var i = 0; i < results.length; i++) { 
      alert(results); 
      $scope.image = results[i]; 
      // Print image URI 
     } 
    }, function(error) { 
     console.log('Error: ' + JSON.stringify(error)); // In case of error 
    }); 
} 

Answer 1

做到這一點，最簡單的方法是使用cordova-gallery-api插件，請參考下面的例子：

galleryAPI.getAlbums(function(items) 
{ 
    var html = ""; 

    for(var i = 0; i < items.length; i++) 
    { 
     var album = items[i]; 

     html += '<a href="javascript:loadAlbum(\'' + album.title + '\')" class="album"><span>' + escape(album.title) + '</span></a>'; 
    } 

    $content.innerHTML = html; 

}, function(error){alert(error);}); 

window.loadAlbum = function(albumName) 
{ 
    galleryAPI.getMedia(albumName, function(items) 
    { 
     var html = ""; 

     for(var i = 0; i < items.length; i++) 
     { 
      var media = items[i]; 

      html += '<a href="javascript:void()" class="media"><img src="file://' + media.thumbnail + '" /></a>'; 
     } 

     $content.innerHTML = html; 

    }, function(error){alert(error);}); 
}; 

Answer 2

檢查這個環節，可能是對您有用。

http://www.digitalnoiz.com/mobile-development/photo-gallery-with-phonegap-and-jquery-mobile/

Answer 3

添加this插件，

cordova plugin add https://github.com/wymsee/cordova-imagePicker.git 

控制器

$scope.images = []; 
$scope.selectImages = function() { 
    $cordovaImagePicker.getPictures(
     function(results) { 
      for (var i = 0; i < results.length; i++) { 
       $scope.images.push(results[i]); 
      } 
      if (!$scope.$$phase) { 
       $scope.$apply(); 
      } 
     }, 
     function(error) { 
      console.log('Error: ' + error); 
     } 
    ); 
}; 

的Html

<div class="row responsive-md"> 
    <div class="col col-25" ng-repeat="image in images"> 
     <img ng-src="{{image.src}}" width="100%" /> 
    </div> 
</div> 

Tutorial