图像加载不适用于 img 和 Blob答案

【问题标题】：Image onload not working with img and Blob图像加载不适用于 img 和 Blob
【发布时间】：2015-02-21 13:08:58
【问题描述】：

问题来了，

我需要创建一个带有 .svg 文件的图像文件。我有一个应该绘制 svg 的函数，然后，我从画布中获取它以将其保存为图像文件。

我的绘图功能是：

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 是画布 2d 上下文， rawSVG 是 svg 内容控制台给出一个这样的 url：

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

但是 img ONLOAD 永远不会触发...所以我没有回调并且函数停止。我不在本地工作，所以问题不在于获取本地文件...

感谢您的帮助！

【问题讨论】：

标签： javascript image canvas blob onload

【解决方案1】：

使用addEventListener 而不是onLoad（输入错误，见最后）属性：

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

您可以使用数据 URL 代替 blob，但这取决于您：

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/

如果它不起作用，问题可能是您的 SVG 文件。它必须在<svg> 标记中至少包含以下属性：

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

如果您想坚持使用该属性，请使用没有大写字母的正确版本：img.onload，但您确实应该使用addEventListener。

【讨论】：

你能解释一下我可以如何使用 dataURL 吗？我尝试使用 eventListener（我已经尝试使用 onload 而不是 onLoad，但没有任何改变......）
也不能使用您的 dataURL 东西......但猜测它应该来自不再存在的“url”var......但是，日志“image onload”没有出现......所以... idk 它来自哪里...
它确实有效，我注意到如果 SVG 缺少某些属性，它不会加载。编辑了答案。
所以，终于 :) 问题不是来自 svg 标签，而是来自我在图层 (g) 内的 website.com/picture.svg），我必须在调用函数之前将它们替换为图像代码......谢谢你的帮助 :)
正如one other answer 指出的那样，观察顺序（首先是处理程序，然后是数据）。至少从本地文件中，处理程序可能永远不会触发。使用不同选项的测试：jsfiddle.net/ewa7foe4 没有太大区别，但它是远程的。也很有趣：JavaScript Event Listeners vs Event Handlers.

【解决方案2】：

在此处查看演示：评论了一些我没有的东西。

  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.org/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.org/files/5395/backdrop.png';

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

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

 &lt;canvas id="canvas" width="500px" height="400px"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案3】：

你需要在设置url之前设置onload。

否则，在您设置回调时，该 url 可能已经加载完毕。

试试这个：

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

【讨论】：