即使使用.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 + ">";
});

這是這個例子的代碼。 它適用於Chrome，但不適用於FireFox。

我在這里搜索了很多類似的問題，大多數時候原因是使用圖像而不等待它的加載，但我有這個.onload的東西，對嗎？

而且我也嘗試過和這個問題一樣的動作，但是FF仍然只顯示透明的圖像。 請幫忙！

Answer 1

在Firefox中有一個錯誤： 在繪制沒有@width或@height的SVG圖像時，drawImage（）會無聲地失敗 。

您可以通過向SVG添加（去圖） width和height來修復它：

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

更新了Codepen