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;
    }
  }

}]);

這是正確的方法嗎？ 有任何提示或想法嗎？

更新：

當我添加時：

sourceType: Camera.PictureSourceType.CAMERA

到第一個功能（從相機拍攝照片）。 它不起作用了。 雖然沒有（可能使用默認值），但它確實起作用。

Answer 1

當我添加sourceType而不是使用默認的sourceType（CAMERA）時

sourceType: Camera.PictureSourceType.CAMERA

它不再工作了，所以我猜這里出了點問題。

正確的語法是：

navigator.camera.PictureSourceType.CAMERA

或（具有其他選項）：

navigator.camera.PictureSourceType.PHOTOLIBRARY

不知道為什么使用“ navigator.camera”而不是“ Camera”，我猜“ Camera”是“ navigator.camera”的別名。

Answer 2

我認為您的代碼在正確的軌道上，就像您說的那樣，如果不能在設備上進行測試就很難分辨。 所以我可以幫你。 去搶intel xdk https://software.intel.com/zh-cn/html5/tools 。 導入您的離子項目，然后注冊一個帳戶。 登錄后，轉到“測試”標簽，然后將您的應用推送到測試服務器。 然后將intel應用預覽安裝在您的手機/平板電腦上（在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);
        };