帆布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和回調

回答

相關問題