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捕获。简单来说，我在地图上看到了一切，但我看不到地图本身。

更新1：

我目前使用的版本是1.0.0-rc.1（最新版本）。

更新2：

画布的本质是webgl。可能是问题吗？根据this，他们确实支持webgl画布。

更新3：

我试图以编程方式获取画布并在其上调用toDataURL。它导致了一个空截图，即使有preserveDrawingBuffer黑客。

更新4：

奇怪的是，它不仅仅捕捉某些画布。我创建了一个2d画布（通过添加preferCanvas来映射配置）并显示它。

Answer 1

试试这个，在任何其他脚本之前将其添加到页面顶部

<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>

有帮助吗？