問題描述

我有一張通過leaflet 渲染的地圖.

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

我需要使用 html2canvas 對(duì)該地圖進(jìn)行截圖.

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

要使用html2canvas，我需要提供一個(gè)要捕獲的DOM 元素(elementToCapture)和一個(gè)可選配置(??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 類提取了一個(gè)元素，它基本上代表了整個(gè)地圖，包括控件(放大/縮小按鈕、比例等)、自定義標(biāo)記、工具提示、疊加層、彈出窗口.

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.

整個(gè) 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 元素(尤其是內(nèi)部 canvas 的內(nèi)容)沒有被 <捕獲代碼>html2canvas.簡(jiǎn)而言之，我在地圖上看到上的所有內(nèi)容，但我看不到地圖本身.

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:

畫布的本質(zhì)是webgl.可能是問題嗎?根據(jù) this，他們確實(shí)支持 webgl 畫布.

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

更新 3:

我嘗試以編程方式獲取畫布并在其上調(diào)用 toDataURL.即使使用 preserveDrawingBuffer hack，它也會(huì)導(dǎo)致屏幕截圖為空.

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

更新 4:

奇怪的是，它不僅僅捕捉某些畫布.我創(chuàng)建了一個(gè) 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.

推薦答案

試試這個(gè)，將它添加到頁(yè)面頂部，在任何其他腳本之前

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>

有幫助嗎?

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