html2canvas захватывает все, кроме содержимого внутреннего холста - PullRequest
Новая
       29

html2canvas захватывает все, кроме содержимого внутреннего холста

1 голос
/ 19 апреля 2019

У меня есть карта, отрисованная с помощью leaflet.

Мне нужно сделать скриншот этой карты, используя html2canvas.

Чтобы использовать html2canvas, мне нужно предоставить элемент DOM для захвата (elementToCapture) и дополнительную конфигурацию (html2canvasConfiguration). 

var html2canvasConfiguration = {
    useCORS: true,
    width: map._size.x,
    height: map._size.y,
    backgroundColor: null,
    logging: true,
    imageTimeout: 0
};

var elementToCapture = map._container.getElementsByClassName('leaflet-pane leaflet-map-pane')[0];
html2canvas(elementToCapture, html2canvasConfiguration).then(function (canvas) {
    var link = document.createElement('a');
    link.download = 'test.png';
    link.href = canvas.toDataURL();
    link.click();
    link.remove();
})

Я извлекаю элемент с помощью класса leaflet-pane leaflet-map-pane, который в основном представляет всю карту, включая элементы управления (кнопки увеличения / уменьшения, масштаб и т. Д.), Пользовательские маркеры, всплывающие подсказки, наложения, всплывающие окна.

Весь DOM выглядит как 

<div class="leaflet-pane leaflet-map-pane">
    <div class="leaflet-pane leaflet-tile-pane">
        <div class="leaflet-gl-layer mapboxgl-map">
            <div class="mapboxgl-canvas-container">
                <canvas class="mapboxgl-canvas leaflet-image-layer leaflet-zoom-animated"></canvas>
            </div>
            <div class="mapboxgl-control-container"></div>
        </div>
    </div>
    <div class="leaflet-pane leaflet-shadow-pane"></div>
    <div class="leaflet-pane leaflet-overlay-pane"></div>
    <div class="leaflet-pane leaflet-marker-pane"></div>
    <div class="leaflet-pane leaflet-tooltip-pane"></div>
    <div class="leaflet-pane leaflet-popup-pane"></div>
<div class="leaflet-control-container"></div>

Проблема, с которой я столкнулся, заключается в том, что элемент leaflet-pane leaflet-tile-pane (особенно содержимое внутреннего canvas) не захватывается html2canvas. Проще говоря, я вижу все на карте, но не вижу саму карту .

enter image description here

enter image description here

ОБНОВЛЕНИЕ 1:

Версия, которую я сейчас использую: 1.0.0-rc.1 (самая последняя).

ОБНОВЛЕНИЕ 2:

Характер холста webgl. Может ли это быть проблемой? Согласно this , они поддерживают webgl полотна.

ОБНОВЛЕНИЕ 3:

Я попытался получить холст программно и вызвать toDataURL на нем. В результате получился пустой скриншот, даже с взломом preserveDrawingBuffer.

ОБНОВЛЕНИЕ 4:

Как ни странно, он не захватывает только определенные холсты. Я создал 2d canvas (добавив preferCanvas к конфигурации карты), и он был показан.

1 Ответ

4 голосов
/ 19 апреля 2019

Попробуйте, добавьте это в верхнюю часть своей страницы, прежде чем другие сценарии 

<script>
HTMLCanvasElement.prototype.getContext = function(origFn) {
  return function(type, attribs) {
    attribs = attribs || {};
    attribs.preserveDrawingBuffer = true;
    return origFn.call(this, type, attribs);
  };
}(HTMLCanvasElement.prototype.getContext);
</script>

Помогает ли это?

...