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

【问题标题】：Img.onload not firing when dynamically setting src to dataURI将 src 动态设置为 dataURI 时，Img.onload 不会触发
【发布时间】：2017-09-15 09:44:36
【问题描述】：

当 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。但是，当登录和浏览 datauri 时，图像正在显示。其他图像似乎正确触发了 onload 事件。

DataURI - PasteBin

【问题讨论】：

试试onerror - 因为有错误
错误在于Olivier Frère中的è
和Adrien Ampélas中的阿德里安é
@JaromandaX 我已经尝试过 onerror，确实会触发，但它没有提供有关问题所在的任何信息。
好吧...尝试将数据 uri 放入您的 pastebin 到地址栏中 - Firefox 会告诉您它不喜欢它的哪些地方

标签： javascript jquery d3.js svg html5-canvas

【解决方案1】：

试试：

imgGraph.complete = function(){

【讨论】：

这不是只适用于附加到 DOM 的 img-tags 吗？如果我尝试这样做，我会收到以下错误：Cannot assign to read only property 'complete' of object '#
是的，确实如此，但我不确定为什么这没有相同的结果。对于以您描述的方式创建的图像，您可能希望为图像对象的非零宽度/高度创建循环检查。或者循环查看imgGraph.complete属性是否为真。
查看我之前的问答：stackoverflow.com/questions/16648546/…

【解决方案2】：

不要对你的 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 时需要帮助，请查看this Q/A

【讨论】：

谢谢，这成功了！使用 blob 的实现甚至产生了比我以前的方法更好的质量！