在将src动态设置为dataURI时，Img.onload不会触发

当imgGraph的src加载了生成的dataURI时，我无法触发onLoad处理程序。 dataURI是使用canvas从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

不要对你的svg进行base64编码。
相反，人们应该更喜欢百分比编码版本，或者更喜欢巨大的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展示了它的不同之处。

但是您应该注意，在元素中加载的SVG无法加载任何外部资源。 因此，如果你想在canvas上绘制它们，你必须在提取标记之前对你在svg中链接的所有图像进行base64编码。
如果这样做，你的svg标记确实很长，对于dataURI版本来说可能太长了。

这是blobURI有用的时候。

PS：如果您需要帮助在svg中附加光栅图像，请检查此Q / A.

Answer 2

尝试：

imgGraph.complete = function（）{