图像加载不适用于 img 和 Blob

Question

问题就在这里，

我需要使用 .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 永远不会触发...所以我没有回调并且函数停止。我不在本地工作，所以问题不是来自获取本地文件......

感谢帮助！

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

您可以使用 Data 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。