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