Question

当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来证明其差异。

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

当blobURI有用时。

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

Answer 2

尝试：

imgGraph.complete = function（）{

在将src动态设置为dataURI

2 个答案: