JavaScript Image onload not working with img and Blob image onload firing,image.onload not working,image onload not

Here is the problem,

I need to create an image file with a .svg file. I have a function which should draw the svg, and then, i get it from a canvas to save it as an image file.

my draw function is :

function drawInlineSVG(ctx, rawSVG, callback) {
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
    var domURL = self.URL || self.webkitURL || self;
    var url = domURL.createObjectURL(svg);
    var img = new Image();
    img.src = url;
    console.log("URL : "+url);
    img.onLoad = function () {
        console.log("image onload");
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };
}

ctx is the canvas 2d context, rawSVG is the svg contents The console gives an url like this :

blob:http://myWebsite.net/521a72ea-3156-4290-ae16-025a8f8275bc

But the img ONLOAD never fires... so i have no callback and functions stop. I'm not working on local, so the problem does not come from getting local file...

Thanks for help!

Use addEventListener intead of the onLoad (what is typed incorrectly, see at the end) property:

function drawInlineSVG(ctx, rawSVG, callback) {
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
    var domURL = self.URL || self.webkitURL || self;
    var url = domURL.createObjectURL(svg);
    var img = new Image();
    img.src = url;
    img.addEventListener('load', function () {
        console.log("image onload");
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    });
}

You could use use Data URL instead of blob, but that is up to you:

function drawInlineSVG(ctx, rawSVG, callback) {
    var img = new Image();
    img.src = 'data:image/svg+xml;utf8,' + rawSVG;
    img.addEventListener('load', function () {
        console.log("image onload");
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    });
}

http://jsfiddle.net/smkuLrbu/

If it's not working the issue probably is your SVG file. It must contains at least the following property in the <svg> tag:

<svg xmlns="http://www.w3.org/2000/svg" ...

If you want to stick with the property, use the correct version which don't have uppercase letters: img.onload, but you really should use addEventListener.

You need to set the onload before setting the url.

Otherwise the url is probably already loaded by the time you set the callback.

Try this:

function drawInlineSVG(ctx, rawSVG, callback) {
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
    var domURL = self.URL || self.webkitURL || self;
    var url = domURL.createObjectURL(svg);
    var img = new Image();

    img.onLoad = function () {
        console.log("image onload");
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
    console.log("URL : "+url);
}