Transforming Image into Base 64

Question

I am transforming an image I send by camera in Base64 but the image is all black, I do not know what is wrong, follows below my code

app.encodeImageUri(mediaFiles[i].fullPath); //Aqui envio o caminho da minha imagem da seguinte maneira 'file:/storage/emulated/0/DCIM/Camera/140014212.jpg'

encodeImageUri: function (imageUri)
{
    var c=document.createElement('canvas');
    var ctx=c.getContext("2d");
    var img=new Image();
    img.onload = function(){
       c.width=this.width;
       c.height=this.height;
       ctx.drawImage(img, 0,0);
    };
    img.src=imageUri;
    var dataURL = c.toDataURL("image/jpeg");
    alert(dataURL);

    var tb1 = '<img src=' + dataURL + '>';
    document.getElementById("imgBase64").innerHTML = tb1;

    return dataURL;
},

Answer 1

I believe that by doing this, solve the problem of the black image:

dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
var tb1 = '<img src=' + dataURL + '>';
document.getElementById("imgBase64").innerHTML = tb1;

But if it doesn’t, here’s a working example: http://jsfiddle.net/handtrix/yvq5y/

Answer 2

I managed to solve with the following code:

convertImgToBase64URL: function (url, nome,callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
},

The function call went like this:

app.convertImgToBase64URL(anexo[aux], ext, function(base64Img){
           /* Aqui Voce coloca a ação que deseja */
        });