现在是2019年！使用dom进行图像

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

leaflet-image无法栅格化html。我认为您最好的选择是让一些服务器端脚本根据请求生成页面的屏幕截图并将其提供给浏览器。

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

Answer 2

现在是2019年！使用dom进行图像

您可以使用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>

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

2 个答案:

现在是2019年！使用dom进行图像