我有一個通過繪制的地圖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。簡而言之,我看到了地圖上的所有內容,但看不到地圖本身。
html2canvas捕獲除內部畫布內容以外的所有內容
鴻蒙傳說
2021-04-29 10:09:38
