当动态设置src到dataURI时，Img.onload不会触发

Question

我在使用d3.js可视化（svg）和canvas生成dataURI时，遇到了一个问题：无法使imgGraph的onLoad处理程序在加载数据URI时触发。请帮我解决这个问题。

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);
}

被设置了，但是从未被触发。当记录和浏览数据时，图像会被显示。然而，其他图像似乎正确地触发了onload事件。 DataURI - PasteBin

- Brent Nys

---

尝试使用 onerror - 因为出现了错误。 - Jaromanda X

错误出现在 Olivier Frère 中的 è。 - Jaromanda X

和 Adrien Ampélas 中的 é。 - Jaromanda X

@JaromandaX，我尝试了onerror, 确实触发了，但它没有提供任何关于出错原因的信息。 - Brent Nys

虽然我看到Chrome可以毫无问题地加载它 - 跨浏览器代码真是一场噩梦，不是吗？ - Jaromanda X

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演示了它们之间的区别。

但是请注意，加载在<img>元素内部的SVG无法加载任何外部资源。因此，如果您想将它们绘制到您的画布上，您需要在提取标记之前对SVG中链接的所有图像进行base64编码。
完成后，您的SVG标记确实会很长，可能太长而无法转换为dataURI版本。

这时候blobURI就非常有用了。

PS：如果您需要帮助将栅格图像附加到SVG中，请查看此问答

- Kaiido

---

谢谢，这个方法很有效！使用Blob实现的效果甚至比我之前的方法更好！ - Brent Nys

Answer 2

尝试：

imgGraph.complete = function() {

- TJS101

---

这个只能在被添加到DOM的img标签上起作用吧？如果我尝试这样做，会得到以下错误：无法分配给只读属性“complete”对象“#<HTMLImageElement>”。 - Brent Nys

是的，确实如此，我不确定为什么这没有相同的结果。对于按照您描述的方式创建的图像，您可能需要创建一个循环检查图像对象的非零宽度/高度。或者循环查看imgGraph.complete属性是否为true。 - TJS101

请看我的之前的问答：http://stackoverflow.com/questions/16648546/how-to-monitor-an-image-source-for-fully-loaded-status - TJS101