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

Question

我正在使用 Leaflet 和 Leaflet data visualization framework 在上面绘制地图和图表。

现在我正在尝试将map with charts 保存为 PNG 图像，但只能成功导出一层 - 地图或图表。

这可能是因为 .leaflet-overlay-pane 中的图表是使用 SVG 元素绘制的，而 .leaflet-tile-pane 中的地图是使用 DIV/IMG 元素绘制的。

发现相关问题：
1) leaflet+canvg+html2canvas = MyImage.png
2)export to image leaflet map with SVG markers in javascript

如何处理？有什么方法可以“展平” SVG 和 DIV/IMG/Canvas 元素以导出为图像？还是应该有别的办法？

谢谢！

Answer 1

使用 dom-to-image 库

您可以使用dom to image library 将传单转换为 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}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11'
    }).addTo(mymap);

var node = document.getElementById('my-node');
var btn = document.getElementById('foo');

// node.innerHTML = "I'm an image now."

btn.onclick = function() {

  domtoimage.toBlob(document.getElementById('my-node'))
    .then(function(blob) {
      window.saveAs(blob, 'my-node.png');
    });
}

#my-node {
  height: 180px;
}

.button {
  padding: 4px;
  margin-bottom: 10px;
}

<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

<script src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

<button id="foo" class="button">download img</button>

<div id="my-node">
  You will get a image downloaded.
</div>

Answer 2

leaflet-image 不能光栅化 html。我认为你最好的选择是让一些服务器端脚本根据请求生成页面的屏幕截图并将它们返回给浏览器。

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