如何拍摄照片和使用离子框架和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
  });

};

如果我想从相机选择一张图片，代码看起来几乎一样，行到：

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：true，我可以从相机拍照，并在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：false，只是从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

推荐答案

使用这个插件，在互联网上查找后，我发现了相机插件属性

I had troubles with this plugin too and after looking up on the Internet i found out that the camera plugin property

allowEdit: true

无法正常工作，无法返回承诺中的裁剪图像，但原始（因此未修改）图像，检查此论坛主题

Does not work properly, not returning the cropped image in the promise, but the original (hence not modified) image, check this forum thread

我使用此解决了此问题插件以及cordova摄像头插件，一个漂亮的解决方案！

I solved this problem using this plugin alongside with the cordova camera plugin, a pretty neat soluton!

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