Save base64 jpg to file

ionic-v1
1

Hello,

I’m currently developing my first app using ionic and I really love it, but I’m facing an issue. I hope someone can help me here :slight_smile:

So, I’m using ezAR to capture images using the camera (not using ngCordova camera because we want to have a custom overlay for the camera and stay “within” the app to allow the use of geolocation and google place api while taking the picture).

I managed to make this works (although some issues are still present on old android devices) but the images captured are sent back in Base64 encoding. I can directly send the Base64 encoded string to the server but that ends up creating files of around 1.1MB… it’s not that much but that might still be an issue if the internet connection is slow or if we have many many users (hopefully one day :slight_smile: )

So, my question is how can I either compress the base64 string, or the resulting jpeg image? should that be done on the server side (preferably not to avoid sending large amount of data from the client)

Or, Is there a plugin to write a base64 string to a compressed jpeg file? I could then directly send the compress jpeg on the server…
The ezAR plugin allows to save the picture to the photo Album library. the resulting file is a ~100k jpeg so it should be definitely possible, but i don’t know how!
I also managed to get a cordova plugin working (cordova-base64-to-gallery) to save base64 string to png images into the gallery but it saves a ~2.2Mb png file, so it’s not of any help!

All comments are weclome!!
Thank you very much

PS: to use the cordova-base64-to-gallery plugin, I just install it and use it with window.cordova.base… I found the ionic-native plugin, under the v2 doc, but is this collection of plugin available for ionic v1? I’ve read that ionic v2 is still in beta right, so for a production code I should stick to v1 am i right? thank you for your help!!

2

So I found a working solution… if that can be of any help.

I found out that this could be done by converting the base64 string to a Blob object then giving this object to ngCordova File writer

here is the code I’m using now

function base64toBlob(base64Data, contentType) {
  contentType = contentType || '';
  var sliceSize = 1024;
  var byteCharacters = atob(base64Data);
  var bytesLength = byteCharacters.length;
  var slicesCount = Math.ceil(bytesLength / sliceSize);
  var byteArrays = new Array(slicesCount);

for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
    var begin = sliceIndex * sliceSize;
    var end = Math.min(begin + sliceSize, bytesLength);

    var bytes = new Array(end - begin);
    for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
        bytes[i] = byteCharacters[offset].charCodeAt(0);
    }
    byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}



var base64Blob = base64toBlob(base64Image, 'image/jpeg')
        $cordovaFile.writeFile(cordova.file.externalDataDirectory, 'new_pic.jpg', base64Blob, true).then(
          function(success){
            console.log('success')
            console.log(success)
          },
          function(error){
            console.log(error)
          }
        )

Still any advice if that solution is not the best is very welcome!!

3 Likes
3

how to convert blob to base64

4

maybe this will help you!

Best

5

@noso i have same code
var reader = new window.FileReader();
reader.readAsDataURL(blobdata);
reader.onloadend = function() {
base64data = reader.result;
$scope.basedata=base64data
$scope.urImg=base64data
console.log(base64data );
}
}
i want to display this base64 image data in src={{urImg }}
but it is not working
when i calling again to controller that time image was displaying

sorry for my bad english

6

try changing your img attribute from src={{urImg}} to ng-src={{urImg}}

ng-src has the advantage to look for changes in your controller and to update the image source as required.

Good luck

7

thanks for help

i tried but it was not working
that after i put
$scope.$apply()
{
$scope.urImg=base64data1
}
this is working