在将src动态设置为dataURI时，Img.onload不会触发 [英] Img.onload not firing when dynamically setting src to dataURI

问题描述

当imgGraph的src加载了生成的dataURI时，我无法触发onLoad处理程序。 dataURI是使用canvas从d3.js可视化（svg）生成的。

I am having trouble getting the onLoad handler to fire when the src of imgGraph is loaded with a generated dataURI. The dataURI is generated from a d3.js visualization (svg) using canvas.

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事件。

The img src is being set, but the img.onload is never fired. When logging and surfing to the datauri, the image is being displayed however. Other images seem to fire the onload event correctly.

DataURI - PasteBin

推荐答案

不要对你的svg进行base64编码。

而不是应该更喜欢百分比编码版本，或者更喜欢大svg，blobURI：

Don't base64 encode your svg.
Instead one should prefer an percent encoded version, or for huge svg, a 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中链接的所有图像进行base64编码。

当这样做时，你的svg标记确实会是对于dataURI版本，可能太长了，也许太长了。

But you should note that SVGs loaded inside an <img> element can't load any external resources. So you'll have to base64 encode all the images linked in your svg prior to extract the markup if you want to draw them on your canvas too.
When this will be done, your svg markup will indeed be long, and maybe too long for a dataURI version.

这是blobURI有用的时候。

That's when the blobURI is useful.

PS：如果你需要帮助来附加你的光栅你的svg内的图片，请检查此Q / A

这篇关于在将src动态设置为dataURI时，Img.onload不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！