javascript - 即使使用 .onload 和回调，Canvas toDataURL() 在 Firefox 中返回空白图像

Question

我对 FireFox 中的 toDataURL() 函数有疑问

假设我有这样的 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 仍然只显示透明图像。请帮忙!

Answer 1

Firefox 中有一个关于此的错误:drawImage() fails silently when drawing an SVG image without @width or @height .

您可以通过向 SVG 添加(看图)width 和 height 来修复它:

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

Updated Codepen