Why my code to convert any image to a Base64 string is not working?

Question

I am trying to convert any image to a Base64 String but not getting the output

See the screenshot what I am getting

Javascript code

function encodeImageFileAsURL(cb) 
{
return function()
{
    var file = this.files[0];

    var reader  = new FileReader();

    reader.onloadend = function () 
    {
        cb(reader.result);
    }

    reader.readAsDataURL(file);
 }
}

$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img)
{
$('.output')
  .find('textarea')
    .val(base64Img)
    .end()
  .find('a')
    .attr('href', base64Img)
    .text(base64Img)
    .end()
  .find('img')
    .attr('src', base64Img);
}));

Related http://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form — GibboK, Jan 23 '17 at 14:12

score 0 · Answer 1 · answered Jan 23 '17 at 14:02

Basic example to convert to base64:

function toBase64(src, callback) {
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image();

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        callback(canvas.toDataURL());
    }
img.src = src;
}

Why my code to convert any image to a Base64 string is not working?

1 Answers1