html2canvas captures everything except the content of an inner canvas

Question

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

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

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();
})

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.

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>

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.

UPDATE 1:

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

UPDATE 2:

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

UPDATE 3:

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

UPDATE 4:

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.

https://github.com/niklasvh/html2canvas/issues/1311 Could this be related? They added the option `removeContainer: false` to temporarily fix it. — theblackips, Apr 19 '19 at 10:09
The problem should be fixed in the newest release from 4/10/2019: https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.1 — theblackips, Apr 19 '19 at 10:17
@TheBlackIPs Thank you. I just tried it, and it didn't change anything. I am using the latest version. — Andrew Tobilko, Apr 19 '19 at 10:21
When do you call html2canvas? Are you sure the page has had time to render? Is there any way you could provide an example as a snippet? — theblackips, Apr 19 '19 at 10:37
@TheBlackIPs yes, I am sure. The code gets executed on a button click. The button is rendered on the map controls layer. — Andrew Tobilko, Apr 19 '19 at 10:42
@TheBlackIPs I can't share the real code, but I'll simplify it and share a jsfiddle. — Andrew Tobilko, Apr 19 '19 at 10:57
@TheBlackIPs I can't share a jsfiddle either, it doesn't show the map, because leaflet tries to load some resources over HTTP (not over HTTPS). But I can assure you it's a very straightforward initialization, there is nothing wrong with it. — Andrew Tobilko, Apr 19 '19 at 12:28
@TheBlackIPs I updated the question. html2canvas seems to not want to work with webgl-based canvases. Do you have any thoughts? — Andrew Tobilko, Apr 19 '19 at 12:31

score 14 · Accepted Answer · answered Apr 19 '19 at 13:38

14

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>

Does it help?

answered Apr 19 '19 at 13:38

gman

100,619
31
269
393

2

I wanna kiss you :) Could you elaborate on why it works? Does it force `html2canvas` to set `preserveDrawingBuffer` every time it retrieves the canvas context? – Andrew Tobilko Apr 19 '19 at 13:45
You can not set canvas attributes after getting a context. They can only be set once at creation time – gman Apr 19 '19 at 13:47
does it have to be embedded or is there any nicer/cleaner solution? – Andrew Tobilko Apr 19 '19 at 14:04
You can put it in a script and include it. – gman Apr 19 '19 at 14:05
Nice one! I was stumped there – theblackips Apr 21 '19 at 10:43
where can i add in vue cli – Himanshu Rawat Jan 31 '22 at 12:16
i want to use this in React using arrow functions, i should remove 'this' and what replace that with ? – walee Apr 08 '22 at 20:50
Moving your comment to the answer could make your answer more complete, currently it's just a piece of code(helpful) without explanation(context) of what it does. – Addis Apr 21 '22 at 00:12
Still more people wanting to kiss you}!! – Pablo May 15 '23 at 04:41

html2canvas captures everything except the content of an inner canvas

1 Answers1

Linked