問題描述

我有一張通過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>

有幫助嗎?

這篇關于html2canvas 捕獲除內部畫布內容之外的所有內容的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！