Javascript Base64 Image Data is corrupt/invalid?

Question

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.net/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?

OJay · Accepted Answer · 2015-11-10 19:17:36Z

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.

Aaron Yarborough · Accepted Answer · 2015-11-10 19:06:49Z

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.

Collectives™ on Stack Overflow

Javascript Base64 Image Data is corrupt/invalid?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related