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

OR（有不同选项）：

navigator.camera.PictureSourceType.PHOTOLIBRARY

不确定为什么“navigator.camera”而不是“相机”，我猜“相机”是“navigator.camera”的别名。

Answer 2

我认为您的代码处于正确的轨道上，就像您说的那样，如果不能在设备上进行测试就很难分辨。所以我可以帮助你。去抓住英特尔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);
        };

Ionic / Cordova：从手机图库上传图片

2 个答案: