从图库中选择图像时进行离子图像裁剪答案

【问题标题】：Ionic image crop while select image from gallery从图库中选择图像时进行离子图像裁剪
【发布时间】：2017-11-02 14:29:34
【问题描述】：

我在 ionic v1 和 angular v1 中使用过cordova plugin camera。当我们从相机拍照时，插件本身提供了裁剪图像的选项..但是从照片库中选择图像没有选项。

              $scope.choosePhoto = function () {
                    var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 200,
                    targetHeight: 200,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: true
                };

             $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                        window.localStorage.setItem('image',($scope.imgURI));
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }

在选择图库图像时是否有任何图像裁剪解决方案.. 对于我的项目，我也为此使用cordova plugin crop.. 有一个选项，例如，

plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})

但它不起作用，我猜它只适用于android..

谁知道这件事请帮忙？

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

如果您想在 iOS 中访问它，那么您需要在 targetWidth、targetHeight 中提供高分辨率图像。尝试添加：

目标宽度：2000，目标高度：2000

它适用于 iOS 和 Android。

【讨论】：

【解决方案2】：

试试这个解决方案的工作$cordovaCamera

 navigator.camera.getPicture(gotPhoto, onError, {
                            quality: 90,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.CAMERA,
                            allowEdit: true, // here it allow to edit pic.
                            encodingType: Camera.EncodingType.JPEG,
                            mediaType: Camera.MediaType.PICTURE,
                            targetWidth: 200, //what widht you want after capaturing
                            targetHeight: 200
                        });

试试这个...对于画廊我没有测试过画廊，但它高于相机的裁剪作品。

 navigator.camera.getPicture(gotPhoto, onError, {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                            allowEdit: true,
                            targetWidth: 200, //what widht you want after capaturing
                            targetHeight: 200
                        });

更多详情请参考link

【讨论】：

我已经尝试过这个解决方案并打开相机而不是裁剪图库图像。
@Hitarthipanchal 试试看我没有测试过画廊，但它适用于相机裁剪。
我想你没有得到我的问题。我已经明确提到我想要从照片库中选择的图像的裁剪器。

【解决方案3】：

 navigator.camera.getPicture(onSuccess, onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI
  });

  function onSuccess(imageData) {
       console.log(imageData);

       /*Crop Image Plugin Code*/
       plugins.crop(function success (data) {
          console.log(data);
          var image = document.getElementById('myImage');
          image.src = data;
       }, 
       function fail () {

       }, imageData, {quality:100});
  }

 function onFail(message) {
    alert('Failed because: ' + message);
 }

【讨论】：