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

2022-01-12 00:00:00 leaflet javascript webgl html2canvas

我有一张通过leaflet 渲染的地图.

I've got a map rendered by means of leaflet.

我需要使用 html2canvas 对该地图进行截图.

I need to make a screenshot of that map by using html2canvas.

要使用html2canvas，我需要提供一个要捕获的DOM 元素(elementToCapture)和一个可选配置(​​html2canvasConfiguration).

To make use of html2canvas, I need to provide a DOM element to capture (elementToCapture) and an optional configuration (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 类提取了一个元素，它基本上代表了整个地图，包括控件(放大/缩小按钮、比例等)、自定义标记、工具提示、叠加层、弹出窗口.

I extract an element by the leaflet-pane leaflet-map-pane class, which basically represents the whole map including controls (zoom in/out buttons, scale, etc), custom markers, tooltips, overlays, popups.

整个 DOM 看起来像

The entire DOM looks like

<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.简而言之，我在地图上看到上的所有内容，但我看不到地图本身.

The problem I've faced is the leaflet-pane leaflet-tile-pane element (particularly the content of the inner canvas) doesn't get captured by html2canvas. To put it simply, I see everything on the map, but I don't see the map itself.

更新 1:

我目前使用的版本是1.0.0-rc.1(最新的).

The version I am currently using is 1.0.0-rc.1 (the latest one).

更新 2:

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

The nature of the canvas is webgl. Might it be the issue? According to this, they do support webgl canvases.

更新 3:

我尝试以编程方式获取画布并在其上调用 toDataURL.即使使用 preserveDrawingBuffer hack，它也会导致屏幕截图为空.

I tried to obtain the canvas programmatically and call toDataURL on it. It resulted in an empty screenshot, even with the preserveDrawingBuffer hack.

更新 4:

奇怪的是，它不仅仅捕捉某些画布.我创建了一个 2d 画布(通过将 preferCanvas 添加到地图配置)并显示出来了.

Oddly enough, it doesn't capture only certain canvases. I've created a 2d canvas (by adding preferCanvas to map configuration) and it got shown.

推荐答案

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

Try this, add this to the top of your page, before any other scripts

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

有帮助吗?

相关文章