Ionic/Cordova：從手機圖庫中上傳圖片

Question

我希望用戶能夠拍照或從手機圖庫中選擇圖片。

我成功設法拍照並獲得imageURI。

我使用Genymotion作爲模擬器，因爲我需要訪問某些功能，例如相機。我知道還有其他一些解決方案。仿真時調試有點困難，但這是我發現現在訪問攝像頭的唯一方法。因此，我無法看到第二部分發生了什麼（從圖庫中選擇圖像）。

$scope.uploadPopup = function() { 
    var uploadPopup = $ionicPopup.show({ 
     title: "Edit profile's picture", 
     templateUrl: 'templates/partials/upload-img.html', 
     buttons: [ 
      { 
       text: '', 
       type: 'button-energized icon-center ion-ios7-camera', 
       onTap: function(e) { 

        // e.preventDefault() will stop the popup from closing when tapped. 
        e.preventDefault(); 
        alert('Getting camera'); 
        Camera.getPicture({ 
         quality: 100, 
         saveToPhotoAlbum: false 
        }).then(function(imageURI) { 
         alert(imageURI); 
         $scope.lastPhoto = imageURI; 
        }, function(err) { 
         alert(err); 
        }); 

       } 
      }, 
      { 
       text: 'From gallery', 
       type: 'button', 
       onTap: function(e) { 
        e.preventDefault(); 
        alert('Getting gallery'); 
        Camera.getPicture({ 
         quality: 100, 
         sourceType: Camera.PictureSourceType.PHOTOLIBRARY 
        }).then(function(imageURI) { 
         alert(imageURI); 
         $scope.lastPhoto = imageURI; 
        }, function(err) { 
         alert(err); 
        }); 
       } 
      } 
     ] 
    }); 
}; 

服務：

app.factory('Camera', ['$q', function($q) { 

    return { 
    getPicture: function(options) { 
     var q = $q.defer(); 

     navigator.camera.getPicture(function(result) { 
     // Do any magic you need 
     q.resolve(result); 
     }, function(err) { 
     q.reject(err); 
     }, options); 

     return q.promise; 
    } 
    } 

}]); 

是否做了正確的方法是什麼？任何提示或想法？

UPDATE：

當添加：

sourceType: Camera.PictureSourceType.CAMERA 

到所述第一函數（採取從相機拍攝照片）。它不起作用了。沒有（可能使用默認的），它確實有效。

Answer 1

當我加入的，而不是使用默認的sourceType的（CAMERA）

sourceType: Camera.PictureSourceType.CAMERA 

它不工作了，所以我猜東西sourceType的這裏錯了。

正確的語法是：

navigator.camera.PictureSourceType.CAMERA 

OR（使用不同的選項）：

navigator.camera.PictureSourceType.PHOTOLIBRARY 

不知道爲什麼 「navigator.camera」，而不是 「照相機」，我猜「相機」是「navigator.camera」的別名。

Answer 2

我認爲你的代碼是在正確的軌道上，就像你說的，如果不能在設備上測試它很難說。所以我可以幫你。去搶intel xdk https://software.intel.com/en-us/html5/tools。導入您的離子項目，然後創建一個帳戶。登錄後，轉到測試選項卡並將您的應用推送到測試服務器。然後在您的手機/平板電腦上安裝英特爾應用預覽版（位於android和ios上）。打開應用程序並登錄，然後點擊底部的服務器應用程序，您將看到您的應用程序並能夠在手機上運行它。您還可以使用intel xdk通過實時調試在手機上運行應用程序。希望這可以幫助！乾杯！

這裏是我的ngCordova插件代碼：

//opens up the phones camera in order to take a picture 
     //requires module ngCordova and the method $cordovaCamera 
     //sets Data.Image to a base 64 string 
     $scope.takePhoto = function() { 
      document.addEventListener("deviceready", function() { 
       var options = { 
        quality: 100, 
        destinationType: Camera.DestinationType.DATA_URL, 
        sourceType: Camera.PictureSourceType.CAMERA, 
        allowEdit: false, 
        encodingType: Camera.EncodingType.PNG, 
        targetWidth: 800, 
        targetHeight: 1100, 
        popoverOptions: CameraPopoverOptions, 
        saveToPhotoAlbum: false 
       }; 
       $cordovaCamera.getPicture(options).then(function (imageData) { 

        $scope.image = "data:image/png;base64," + imageData; 
       }, function (err) { 
        // error 
       }); 
      }, false); 
     };