Javascript 传单数据可视化框架导出为图像

我用传单在上面画地图和图表

现在我试图保存到PNG图像，但只能成功导出一个图层-地图或图表

这可能是因为.传单覆盖窗格中的图表是在SVG元素中绘制的，而.传单平铺窗格中的地图是使用DIV/IMG元素绘制的

发现相关问题：
1）
(二)

如何处理？有没有办法“展平”SVG和DIV/IMG/Canvas元素以导出为图像？还是应该有另一种方法

谢谢

无法光栅化html。我认为最好的办法是让一些服务器端脚本根据请求生成页面的屏幕截图，并将其返回到浏览器

我使用wkhtmltopdf将传单地图转换为PDF，这需要一些调整才能正确使用。

使用dom到图像库 可以使用将传单转换为png图像

请参见以下示例：

var mymap=L.map（'my-node'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”
}).addTo（mymap）；
var node=document.getElementById（'my-node'）；
var btn=document.getElementById（'foo'）；
//node.innerHTML=“我现在是图像了。”
btn.onclick=函数（）{
domtoimage.toBlob（document.getElementById（'my-node'））
.then（函数（blob）{
saveAs（blob，'my node.png'）；
});
}

#我的节点{
高度：180像素；
}
.按钮{
填充：4px；
边缘底部：10px；
}

下载img
您将下载一个图像。

为什么传单图像无法重新验证html？我没有使用

L\u preference\u CANVAS=true和我在代码中看到的IMG标记。此外，我可以在
传单图像（映射，回调）
函数中删除对
映射的检查。并创建传单/传单dvf的图像，但不包含传单dvf svg元素（图表）。引用传单图像README.md：“此库不光栅化HTML，因为浏览器无法光栅化HTML。因此，L.divIcon和其他基于HTML的地图功能（如缩放控件或图例）不包括在输出中，因为它们是HTML。“传单图像仅适用于L_preference_CANVAS=true；或者它的传单-1.0等价交易，因为我让它在
0.7.7
上不使用
L\u preference\u CANVAS
。现在我想做两个PNG。一个来自
传单图像
，另一个来自SVG并在服务器上合并。问题在于此SVG（来自
传单dvf
）的大小不同（更大）。