Экспорт фреймворка визуализации данных листовки как изображения

Я использую Leaflet и структуру визуализации данных Leaflet, чтобы рисовать поверх них карты и диаграммы.

Теперь я пытаюсь сохранить карту с диаграммами в изображение PNG. , но может успешно экспортировать только один слой - карты или диаграммы.

Вероятно, это связано с тем, что диаграммы в .leaflet-overlay-pane нарисованы в элементе SVG, а карта в .leaflet-tile-pane нарисована с использованием элементов DIV / IMG.

Обнаружены связанные проблемы:
1) листовка + canvg + html2canvas = MyImage.png
2 ) экспорт в карту листовок изображений с маркерами SVG в javascript < / а>

Как с этим бороться? Есть ли способ «сгладить» элементы SVG и DIV / IMG / Canvas для экспорта как изображения? Или должен быть другой подход?

Спасибо!


javascript leaflet angular-leaflet-directive
person Orbitum    schedule 07.06.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Используйте библиотеку 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/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

 <script src="https://unpkg.com/[email protected]/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>

person hitautodestruct    schedule 12.12.2019

arrow_upward
0
arrow_downward

изображение-листовка не может растрировать HTML. Я думаю, что вам лучше всего, чтобы какой-нибудь серверный скрипт генерировал скриншоты страницы по запросу и отправлял их обратно в браузер.

Я использовал wkhtmltopdf для преобразования карт листовок в PDF, что требует некоторой настройки, чтобы все получилось.

person Jieter    schedule 07.06.2016
comment
Почему изображение-листовка не может рестеризовать HTML? Я не использую L_PREFER_CANVAS = true; и вижу в коде теги IMG. Более того, я могу убрать проверку map._pathRoot в функции leafletImage(map, callback) и создать изображение листовки / листовки-dvf, но без элементов svg (диаграмм) листовки-dvf. - person Orbitum; 07.06.2016
comment
Цитата из листовки README.md: Эта библиотека не растрирует HTML, потому что браузеры не могут растрировать HTML. Поэтому L.divIcon и другие функции карты на основе HTML, такие как элементы управления масштабированием или легенды, не включаются в вывод, поскольку они являются HTML. Leaflet-image работает только с L_PREFER_CANVAS = true; или аналогичный листок-1.0 - person Jieter; 07.06.2016
comment
Странно, потому что у меня он работал без L_PREFER_CANVAS на 0.7.7. Сейчас пытаюсь сделать два PNG. Один из leaflet-image, а другой из SVG и объединяется на сервере. Проблема в том, что этот SVG (из leaflet-dvf) другого размера (больше). - person Orbitum; 07.06.2016