How to get image from a local URL and convert to Base64 in Javascript

Question

I have an URL like this -> blob:http%3A//localhost%3A4400/a558ba4c-076b-490a-999d-92bc85f2bcee, but this URL only can be readed in my browser but not in another.

.controller('cameraCtrl', function ($scope, Camera) { 
    $scope.takePhoto= function () { 
        Camera.takePhoto().then(function (urlImage) { 
            $scope.lastPicture = urlImagen; 
        }, 
        function (err) { 
            console.err(err); 
        }, 
        { 
            quality: 50, 
            targetWidth: 50, 
            targetHeight: 50, 
            saveToPhotoAlbum: true 
        }); 
    }; 
}

The question is: How to get the image for that URL to convert it to a string Base64? Any help would be great, thank you.

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding — Blazemonger, Feb 16 '16 at 15:50
.controller('cameraCtrl', function ($scope, Camera) { $scope.takePhoto= function () { Camera.takePhoto().then(function (urlImage) { $scope.lastPicture = urlImagen; }, function (err) { console.err(err); }, { quality: 50, targetWidth: 50, targetHeight: 50, saveToPhotoAlbum: true }); }; } }) ; //I'm using AngularJS and Cordova — José Gabriel Almendares, Feb 16 '16 at 15:51
I did not think it was possible to convert an image to base64 using js but it appears it is possible. http://stackoverflow.com/questions/934012/get-image-data-in-javascript/934925#934925 and http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript should help you. — , Feb 16 '16 at 16:11

QBM5 · Answer 1 · 2016-02-16T16:06:24.530

You should add code so people dont have to write their solutions from scratch, but.

function  ConvertBlobToDataUrl(blobUrl, complete){
   var canvas = document.createElement("canvas");
   var ctx = canvas.getContext("2d");
   var tempImg = new Image();

   tempImg.onload = function(){
      canvas.width = tempImg .width;
      canvas.height = tempImg .height;
      ctx.drawImage(tempImg , 0,0, tempImg.width, tempImg.height);
      complete(canvas.toDataURL())
   }

   tempImg.src = blobUrl;

}

then the usage would be

var dataUrl = "";
ConvertBlobToDataUrl(blobUrl, function(url){
    dataUrl = url;
}

Written from memory, but should work as is.

How to get image from a local URL and convert to Base64 in Javascript

1 Answers1