srcをdataURIに動的に設定すると、Img.onloadが起動しない

Question

imgGraphのsrcに生成されたdataURIがロードされているときにonLoadハンドラを起動できない場合があります。 dataURIは、キャンバスを使用してd3.js視覚化（svg）から生成されます。

var canvas = document.getElementById(visual + '-canvas'); 
if(visual == "graph"){ 
    console.log('graph logic n stuff') 
    canvas.width = 558; 
    canvas.height = 558; 
    var graph = d3.select('#graph-svg').node(); 
    var svg_xml = (new XMLSerializer()).serializeToString(graph); 
    var imgGraph = new Image(); 
    var context = canvas.getContext('2d'); 
    var imageData; 
    imgGraph.onload = function(){ 
     console.log('img loaded') 
     context.drawImage(imgGraph, 0, 0); 
     imageData = getImgData(canvas); 
     console.log(imageData) 
     def.resolve(imageData) 
    } 
    console.log('setting src') 
    imgGraph.src = "data:image/svg+xml;base64,"+btoa(svg_xml); 
} 

img srcが設定されていますが、img.onloadは決して起動されません。 ログアウトしてデータリスにサーフィンすると、画像が表示されます。 他のイメージは、onloadイベントを正しく発生させるようです。

DataURI - PasteBin

Answer 1

はbase64であなたのSVGをエンコードしないでください。
代わり一つパーセントエンコードされたバージョンを好む、または巨大なSVG、blobURIためべき：

img.src = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(yourSVGMarkup); 

又は

img.src = URL.createObjectURL(
    new Blob([yourSVGMarkup], { 
    type: 'image/svg+xml;charset=utf8' 
    }) 
); 

JSfiddle差を実証します。

ただし、<img>要素内にロードされたSVGは外部リソースをロードできないことに注意してください。だからあなたはあなたのキャンバスにもそれらを描きたいなら、マークアップを抽出する前にあなたのSVGにリンクされているすべてのイメージをbase64でエンコードする必要があります。
これが完了すると、あなたのsvgマークアップは実際には長くなり、dataURIバージョンでは長すぎるかもしれません。

これは、BLOBURIが便利なときです。

PS：あなたはonerror` `てみてください、あなたのSVG内のラスタ画像を追加するために役立つthis Q/A

Answer 2

試してみてください。

は

imgGraph.complete =機能（）{