Displaying image taken from camera (Ionic/Cordova) using base64

Question

I am using the ionic framework and I am running into a small issue. I have a button called 'upload' and when I click it, I take a picture using '$cordovaCamera'. I am receiving the image as a base64 string and then I have a variable called '$scope.hold' which stores the base64 string (imageData).

The issue is that the image that pops up as soon as I take the image is blurry. I'm not sure what the error is -- I have '100' as 'quality' in my 'options' variable. Someone please advise? I know there are better ways to do this rather than base64 but I am sticking to this method for now.

In my HTML file I have:

<img id="pic" data-ng-src="data:image/jpeg;base64,{{hold}}" width="100%" />

My javascript controller looks like:

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

        $cordovaCamera.getPicture(options).then(function(imageData) {

            alert("Got it!!");
            $scope.hold = imageData;


        }, function(err) {
            alert("We have an error: " + error );
        });
    };

Thanks in advance!

Mathavan Ramakrishnan Mathavan Ramakrishnan · Accepted Answer · 2016-08-26T07:17:59

Use the below code the main reason image gets blurred is because you have set quality to 100. Change the quality and see the changes

var options = {
           quality : 75,
           destinationType : Camera.DestinationType.DATA_URL,
           sourceType : Camera.PictureSourceType.CAMERA,
           allowEdit : false, //To enable/disable the user editing in camera
           encodingType: Camera.EncodingType.JPEG,
           targetWidth: 640,
           targetHeight: 400,
           popoverOptions: CameraPopoverOptions,
           saveToPhotoAlbum: false
       };

Displaying image taken from camera (Ionic/Cordova) using base64

1 Answers