Question

目前我正在开发一种离子框架移动应用程序，我有正确制作个人资料图片的问题。

我正在使用cordovaCamera插件，我必须用相机拍照或使用图书馆中的图片。在获得图片之后，用户应该能够裁剪图片以仅上传部件，他想要。

使用相机拍照的我的javascript- / angular-code看起来像这样：

$scope.takePicture =  function () {

    var options = {
    quality: 100,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 500,
    targetHeight: 500,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function(err) {
    // error-handling not done by now
  });

};

如果我想从相机中选择一张图片，代码看起来几乎一样，我只需将一行更改为：

sourceType: Camera.PictureSourceType.PHOTOLIBRARY,

问题是现在，如果我设置allowEdit：true，我可以从相机拍摄照片并在Android设备上裁剪它们，但是iphone无法裁剪拍摄/选择的照片。

如果我设置allowEdit：false并且只是从cordovaCamera获取图片以后使用其他功能裁剪它，图片会改变Android设备上的方向，而选项correctOrientation根本不起作用。

我真的需要一些帮助来解决这个问题。

亲切的问候

rholtermann

Answer 1

我也遇到了这个插件的麻烦，在网上查找后发现了相机插件属性

allowEdit: true

无法正常工作，没有返回承诺中的裁剪图像，而是返回原始（因此未修改）的图像，请检查forum thread

我使用这个plugin和cordova相机插件一起解决了这个问题，这是一个非常整洁的解决方案！

Answer 2

你必须使用$cordovaCamera.getPicture(options)来拍照或从图书馆工作。我正在发布一个适合我的相机示例代码在您的控制器中将相机代码写为

$scope.userPic = function(){
            console.log("userPic function got called");
            $ionicPopup.show({
              template: '<p>Take picture or use from library</p>',
              title: 'Choose',
              buttons: [
                {
                  text: '<b>Camera</b>',
                  onTap: function(e) {
                    return "camera";
                  }
                },
                {
                  text: '<b>Library</b>',
                  type: 'button-positive',
                  onTap: function(e) {
                    return "library";
                  }
                },
              ]
            }).then(function(resp) {
              $scope.takePicture(resp);
              console.log('resp', resp);
            });
        }

        $scope.takePicture = function(resp){
            console.log("takePicture function got called");
            console.log(resp);
            var source;
            if (resp == "camera") {
              source = Camera.PictureSourceType.CAMERA;
            }else{
              source = Camera.PictureSourceType.PHOTOLIBRARY;
            };
            var options = {
              quality : 75,
              destinationType : Camera.DestinationType.FILE_URI,
              sourceType : source,
              allowEdit : true,
              encodingType: Camera.EncodingType.JPEG,
              targetWidth: 300,
              targetHeight: 300,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
            };
             $cordovaCamera.getPicture(options).then(function(imageData) {
                console.log(imageData);
            }, function(err) {
                console.log(err);
                // error
            });
             }

在HTML中将相机按钮代码写为

<button class="button button-bar button-balanced" ng-click="userPic()">
      Camera
    </button>

如何使用离子框架和cordovaCamera插件拍照并裁剪它们？

2 个答案: