Ionic image crop while select image from gallery

5
votes

I have used cordova plugin camera in ionic v1 and angular v1. The plugin itself provide option for a crop image while we are take picture from camera..but there is no option in select image from photo library.

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

Is there any solution for image cropping at the time of choose gallery image.. for my project I also use cordova plugin crop for this.. there is a option like,

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

})
.catch(function fail (err) {

})

but its not working and it is only for android I guess..

anyone who know about this please help?

3
angularjsionic-framework

3 Answers

0
votes

If you want to access this in iOS then you need to provide high resolution image in targetWidth, targetHeight. Try adding :

targetWidth: 2000, targetHeight: 2000

It is working for me in iOS and Android.

0
votes

Try this solution for its work $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
                        });

try with this... for gallery i have't tested it for gallery but it above cropping works for Camera.

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

for more details plz refer this link

0
votes
 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);
 }