Cordova, store image from data URL or base64

In order to get image resized and store the image right away, we need some workaround to achieve this result.

First, resize the image into thumbnail-like size
2nd, store the image into targeted directory

This is achievable with Phonegap-image-resizer

$window.imageResizer.resizeImage(function(resizedImage) {

  // Store image into local
  $window.imageResizer.storeImage(function(response) { // cache
    var filePath = response.filename,
        pathOnly = filePath.substring(0, sourceFile.lastIndexOf('/')) + '/',
        filename = filePath.split('/').pop().replace(/\#(.*?)$/, '').replace(/\?(.*?)$/, '');


    // store file into targeted location here with 
    // cordova official File plugin
    $cordovaFile.moveFile(pathOnly, filename, cordova.file.dataDirectory).then(function(success) {
      console.log(success);
    }, function(error) {
      console.log(errir);
    });


  }, function(error) {
    return error;

  }, resizedImage.imageData, {
    imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,
    format: 'jpg',
    filename: // new name,
    directory: // location to store,
    quality: 80
  });

}, function(error) {
  return error;

}, photo.url, 0.2, 0.2, {
  imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
  resizeType: ImageResizer.RESIZE_TYPE_FACTOR,
  format: 'jpg'
});

Two parts here:


TL;DR

1st step, $window.imageResizer.resizeImage will resize the image
2nd step, $window.imageResizer.storeImage store image

Cursory go through resizeImage.js to better understand how to utilise the code.

Reference: Converting Large Images to Base64Strings in Ionic Framework

Convert base64 to Blob

I'm developing android app with AngularJs & ngCordova,
and in my case, I just can choose to get image file from it's URI.

We don't have "[Select file...]" button to click to set our file directly into $scope object.
For example:

$scope.insertFile = function (file) {

    $scope.fileObject = file;

};

I then use Cordova's plugin, $cordovaFile - readAsDataURL, to get the base64 formatted file.
It's so I can upload my picture through $http and data parameter in form of FormData().

Simply convert into Blob as below does not work:

$cordovaFile.readAsDataURL(file.directory, file.name).then(function(response) {
 // take jpeg image as example
 var imageFile = new Blob(response, {type: 'image/jpeg'}); 
 formData.append('photo', imageFile, file.name);
};

It (the conversion) breaks my image file, because `new Blob()` doesn't automatically encode base64.

I have been struggling to get a non-broken image uploaded for some time until I found a solution that solved my problem below.

Solution
I found a useful HTML5 Filesystem API library code has method that helps correctly converting base64 into Blob.

With this I corrected my code into:

$cordovaFile.readAsDataURL(file.directory, file.name).then(function(response) {
 // take jpeg image as example
 var imageFile = dataURLToBlob(response);
 formData.append('photo', imageFile, file.name);
};

It does convert my image file correctly, and my app is no longer uploading broken image again.

Reference:
http://stackoverflow.com/questions/12168909/blob-from-dataurl