Search code examples
angularjscordovaionic-frameworkcordova-plugins

How to Convert Cordova Image Picker Results to Base64 format?


Hi I want to know how to Convert the Image Picker Results to Base64 , While Getting the image through Cordova Camera I can get base64 format data but in cordova image picker it does not working

I have Seen the below link and applied its Working for Cordova Camera Image Capture but not working for cordova image picker

http://stackoverflow.com/questions/29456897/cordova-image-picker-convert-to-base64

Not Working for cordova image Picker

 $scope.Pick=function(){
  var options = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false,
    correctOrientation:true
    };

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
      for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
      }
      $scope.results=results;
    }, function(error) {
    });

};

Working For Cordova Image Capture

$scope.captureimage=function()
{
 var options = {
      quality: 100,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 100,
      targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false,
    correctOrientation:true
    };
    $cordovaCamera.getPicture(options).then(function(imageData) {

      $scope.cimage=imageData;
      alert($scope.cimage);
    }, function(err) {
    });

  }

Solution

  • pickimage returns an URI not the image data. Here's the code that should do what you want:

     $scope.Pick=function(){
      var options = {
          quality: 50,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.CAMERA,
          allowEdit: true,
          encodingType: Camera.EncodingType.JPEG,
          targetWidth: 100,
          targetHeight: 100,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
        correctOrientation:true
        };
    
      $cordovaImagePicker.getPictures(options)
        .then(function (results) {
          for (var i = 0; i < results.length; i++) {
            console.log('Image URI: ' + results[i]);
    
            window.resolveLocalFileSystemURI(results[i],
                function (fileEntry) {
                    // convert to Base64 string
    
    
                    fileEntry.file(
                        function(file) {
                            //got file
                            var reader = new FileReader();
                            reader.onloadend = function (evt) {
                                var imgData = evt.target.result; // this is your Base64 string
                            };
                            reader.readAsDataURL(file);
                        }, 
                    function (evt) { 
                        //failed to get file
                    });
                },
                // error callback
                function () { }
            );
          }
    
    
          $scope.results=results;
        }, function(error) {
        });
    
    };