我有一个通过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
。可能是问题所在吗?根据{{3}},他们确实支持webgl
画布。
更新3:
我试图以编程方式获取画布并在其上调用toDataURL
。即使遭到了preserveDrawingBuffer
的入侵,它也导致了一个空白的屏幕截图。
更新4:
奇怪的是,它不能仅捕获某些画布。我已经创建了2d
画布(通过向地图配置中添加preferCanvas
来显示它。
答案 0 :(得分:3)
尝试一下,将其添加到页面顶部,然后再添加其他脚本
<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>
有帮助吗?