如何拍照，并使用离子型框架和cordovaCamera-插件裁剪呢？ [英] How to take pictures and crop them using ionic framework and cordovaCamera-plugin?

问题描述

目前我正在开发的离子型框架的移动应用程序，我有这个问题，以便正确的个人资料，照片。

Currently I'm developing an ionic-framework-mobile-application and I have the problem to correctly make profile-pictures.

我现在用的cordovaCamera-插件，我必须采取用相机图片或从库中使用图片。
得到一个画面，用户应该能够裁剪图片只上传部后，他要

I am using the cordovaCamera-plugin and I have to take pictures with the camera or to use pictures from the library. After getting a picture the user should be able to crop the picture to just upload the part, he wants to.

我的Javascript成为/ angular- code，以使用相机的图片看起来是这样的：

My javascript- / angular-code to take a picture using the camera looks like this:

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

};

如果我想选择从相机code看起来几乎相同的图片，我只是改变一行：

If I want to choose a picture from the camera the code looks nearly the same, I just change one line to:

sourceType: Camera.PictureSourceType.PHOTOLIBRARY,

问题是现在，如果我设置allowEdit：真的，我可以从相机拍照和裁剪他们在Android设备上，而是iphone不能裁剪拍摄/选定的图片

The problem is now, if I set allow true, I can take pictures from the camera and crop them on an android device, but an iphone is not able to crop the taken / selected pictures.

如果我会成立allowEdit：假的，只是获得cordovaCamera图片与其他职能事后裁剪，图像改变在Android设备上的方向和期权correctOrientation不会在所有的工作。

If I would set allow false and just get the picture from cordovaCamera to crop it afterwards with an other function, the picture changes the direction on an android device and the option correctOrientation does not work at all.

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

I could really need some help to get this problem solved.

亲切的问候

rholtermann

rholtermann

推荐答案

您必须使用 $ cordovaCamera.getPicture（选项）来设置拍照或从工作library.Here我张贴的样本code的相机，这为我工作
在你的控制器写入相机code作为

you have to use $cordovaCamera.getPicture(options) to work for taking a picture or from a library.Here am posting a sample code for camera which worked for me In your controller write the camera code as

$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写的相机按钮code作为

In your HTML write the camera button code as

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

这篇关于如何拍照，并使用离子型框架和cordovaCamera-插件裁剪呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！