javascript - Image onload not working with img and Blob - Stack Overflow

admin管理员组

文章数量:1315312

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:

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 e from getting local file...

Thanks for help!

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/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 e from getting local file...

Thanks for help!

• javascript
• image
• canvas
• blob
• onload

Share Improve this question Follow asked Dec 23, 2014 at 11:34 Julo0sSJulo0sS 2,10255 gold badges3131 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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/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/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);
}

see a demo here:have mented few things which i do not have.

  function drawInlineSVG(ctx) {
	   // var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
	    var domURL = self.URL || self.webkitURL || self;
	    var url = 'https://mdn.mozillademos/files/5395/backdrop.png';
	    console.log("URL : "+url);
	    	var img = new Image();
	    	  img.onload = function(){
	    	    console.log("image onload");
                   alert('inside image onload');
		        ctx.drawImage(this, 0, 0);     
		        domURL.revokeObjectURL(url);
		        callback(this);
	    	  };
	    	  img.src = 'https://mdn.mozillademos/files/5395/backdrop.png';

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

var canvas = document.getElementById('canvas');
	  var ctx = canvas.getContext('2d');
	  drawInlineSVG(ctx);

 <canvas id="canvas" width="500px" height="400px"></canvas>

本文标签： javascriptImage onload not working with img and BlobStack Overflow