帆布toDataURL（）在Firefox返回空白图像甚至.onload和回调

我有toDataURL（有问题）函数在FireFox帆布toDataURL（）在Firefox返回空白图像甚至.onload和回调

想象我有这样的base64图像：

var url = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTkgMTE5Ij48Zz48Y2lyY2xlIGN4PSI1NyIgY3k9IjYyIiByPSI1NyIgc3R5bGU9ImZpbGw6IHJnYigxNjAsIDE2MSwgMTYzKTsgb3BhY2l0eTogMC42OyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjU3IiBzdHlsZT0iZmlsbDogcmdiKDEyMywgMjEwLCAyNDApOyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjQ1IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjx0ZXh0IGR4PSI1NyIgZHk9IjY1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzdHlsZT0iZm9udC1zaXplOjI1cHg7IGZpbGw6ICMyYjJmMmU7IGZvbnQtZmFtaWx5OiAnRElOUHJvIFJlZ3VsYXInLCBzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZCI+MTUlPC90ZXh0PjwvZz48L3N2Zz4=";

然后我要调整它的大小和发送新的URI回：

function getImageUri(url, callback) { 
    image = new Image(); 

    image.onload = function() { 
    var image = this; 
    var canvas = document.createElement('canvas'), 
     context = canvas.getContext('2d'), 
     dataURL; 

    context.drawImage(image, 0, 0, 60, 60); 
    callback(canvas.toDataURL()); 
    } 

    image.src = url; 

}

最后我只是把它拿到新的URI

getImageUri(url, function (uri) { 
    console.log(uri); 
    document.getElementById('circle').innerHTML = "<img src=" + uri + ">"; 
});

本实施例的Here is the codepen。它适用于Chrome，但不适用于FireFox。

我在这里搜索了很多类似的问题，大部分时间原因是使用图像而不等待其加载，但我有这个.onload的东西，对不对？

而且我也一直试图让相同的动作中this问题，但FF仍呈现只是透明的形象。请帮忙！

来源

2017-04-02 Paradoxetion

有关于这个在Firefox中打开了一个错误：drawImage() fails silently when drawing an SVG image without @width or @height。

您可以通过添加（去图）width和height到SVG修复：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="119" height="119" viewBox="0 0 119 119"> 
    …

Updated Codepen

来源

2017-04-02 07:33:36 Ryan

这是如此美丽。谢谢=） – Paradoxetion

如果可以的话，它不是一个真正的错误......或者至少是对FF之一。 ' Kaiido

@Kaiido：是啊，我不是故意暗示它实际上是一个错误，只是说，这是在bug跟踪。 Chrome的行为在此讨论。 – Ryan

帆布toDataURL（）在Firefox返回空白图像甚至.onload和回调

回答

相关问题