I'm basically trying to select an image via a HTML Input and then receive the image via Javascript and get its Base64/Image Data string.

However, the code I've used only returns half of it/partially/corrupt/invalid representation of the image. I tried converting the base64 string returned by it using an online tool and it just returned me a blank image (meaning: corrupt base64 representation)

Here's my Javascript code:

 var c = document.createElement('canvas');
    var ctx = c.getContext('2d');

    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0);
    }

    var imageData = c.toDataURL('image/png');
    alert(imageData);

Here's a JSFiddle. /

As you can see, the base64 string doesn't seem right: as in, the string either seems partially formed or its invalid all together. I can't seem to convert it back to an image.

What am I doing wrong?

I'm basically trying to select an image via a HTML Input and then receive the image via Javascript and get its Base64/Image Data string.

However, the code I've used only returns half of it/partially/corrupt/invalid representation of the image. I tried converting the base64 string returned by it using an online tool and it just returned me a blank image (meaning: corrupt base64 representation)

Here's my Javascript code:

 var c = document.createElement('canvas');
    var ctx = c.getContext('2d');

    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0);
    }

    var imageData = c.toDataURL('image/png');
    alert(imageData);

Here's a JSFiddle. http://jsfiddle/t2mcr3Lr/1/

As you can see, the base64 string doesn't seem right: as in, the string either seems partially formed or its invalid all together. I can't seem to convert it back to an image.

What am I doing wrong?

• javascript
• jquery
• html
• image
• base64

Share Improve this question Follow asked Nov 10, 2015 at 18:46 JayJay 5,08499 gold badges7878 silver badges142142 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I think you might be hitting a minor timing issue. You are creating the image from the chosen file, then you are drawing it to the canvas on the onload function, all good. Issue is that you are trying to get the imageData (i.e. c.toDataURL) immediately after you set up the onload handler, NOT after it has run, so I would say the canvas hasn't finished drawing the image when you try to get it via c.toDataURL();

as per this Fiddle

all I did was move the toDataURL inside of the onload function, so now it runs after the canvas has drawn the image

var c = document.createElement('canvas');
var ctx = c.getContext('2d');

var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
    c.width = img.width;
    c.height = img.height;
    ctx.drawImage(img, 0, 0);
    var imageData = c.toDataURL('image/png');
    console.log(imageData);
    alert(imageData);
}

I also added a console.log, as in chrome at least, if you log the url to the console, you can then just click on it and see if chrome then actually opens the data url as the image in a new tab, easiest way to test it.

Also on what you were getting before, I don't actually think you were getting corrupt/partial/invalid base64 at all, as every time the initial code ran, it returned the same base64. This was actually valid base64 of an all white image, i.e. the blank canvas element before anything was drawn on it.

You simply need to put your toDataURL() code into your img.onload event handler, as you're currently trying to get the data URL of the image before it's had a chance to fully load.

// Full code from provided jsFiddle link

var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');

    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0);
        
        var imageData = c.toDataURL('image/png');
    	console.log(imageData);
    }
}

Try the above by copying the data URL it spits out into your browser's search bar to load the image.