html2canvas捕获除内部画布内容以外的所有内容

Question

我有一个通过绘制的地图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。简而言之，我看到了地图上的所有内容，但看不到地图本身。