Скриншот MapBox с использованием html2canvas создает черный jpg

Мне удалось сохранить на своем жестком диске скриншот карты, сгенерированной с помощью API Карт Google, с помощью html2canvas. Теперь я пытаюсь сделать то же самое с API MapBox, и все, что я получаю на своем жестком диске, - это черный экран jpg.Скриншот MapBox с использованием html2canvas создает черный jpg

Вот мой HTML код:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/main.css"> 
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script> 
     <script src="js/html2canvas.js"></script> 
    </head> 

    <body onload="initialize()"> 
     <div id="map"></div> 
     <script src="js/coordinates.js"></script> 
    </body> 
</html>

Используя этот CSS, чтобы отобразить его на весь экран:

html { height: 100%; } 
body { height: 100%; margin: 0px; padding: 0px; } 
#map_canvas { width: 100%; height: 100%; }

И этот JS скрипт для создания карты и взять скриншот:

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2luZ2FsYWJ2IiwiYSI6ImNpaWluNXIzbDAwMjB3ZG02c2hmNGhhMnUifQ.5SC9qnrK7eEdAtwv5Z0S_Q'; 

var latitude = 48.858565; 
var longitude = 2.347198; 

function initialize() 
{ 
    var map = new mapboxgl.Map(
    { 
     container: 'map', 
     style: 'mapbox://styles/mapbox/dark-v8', 
     center: [2.347198, 48.858565], 
     zoom: 16, 
     pitch: 35 
    }); 

    setTimeout(screenshot, 1000); 
} 

function screenshot() 
{ 
    html2canvas(document.body, 
    { 
     useCORS: true, 
     onrendered: function(canvas) 
     { 
      var image = document.createElement('a'); 
      image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 
      image.download = 'map.jpg'; 
      image.click(); 
     } 
    }); 
}

Я использую один тайм-аут, чтобы убедиться, что карта хорошо создана, прежде чем делать снимок экрана. Чтобы быть уверенным, что это было так, я даже создал кнопку в моей DOM, вызывающей функцию screenshot() при нажатии, поэтому я уверен, что время рендеринга не является проблемой.

Я прочел здесь: Print Mapbox/Leaflet Map что html2canvas не смог правильно напечатать карту из-за каких-то фиксированных макетов. Интересно, почему он работал с картами Google Maps, но неважно. У вас есть представление об этом?

источник

2015-12-23 Biloutage

MapBox имеет встроенный скриншот апи:

https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/

или захватить данные холста изображения через для mapboxgl, вам необходимо установить preserveDrawingBuffer вариант для этой работы, которая по умолчанию отключено. .. см https://www.mapbox.com/mapbox-gl-js/api/#Map

var img = new Image(); 
var mapCanvas = document.querySelector('.mapboxgl-canvas'); 
img.src = mapCanvas.toDataURL(); 
window.document.body.appendChild(img);

источник

2015-12-24 19:31:38 glued

Спасибо, но этот скриншот апи не работает с MapBox-ГЛ апи. Однако полезно использовать традиционные карты карт. – Biloutage

Hum ... С его webgl/canvas мы говорим о ставке, что вы можете захватить данные изображения из этого. см. мое редактирование для кода – glued

Это работает как шарм. Благодарю. – Biloutage

Убедитесь, что preservedrawingbuffer установлена истина в вашей инициализации карты

var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/mapbox/streets-v10', //hosted style id 
    center: [-98.5795, 39.8282], // starting position 
    zoom: 8, // starting zoom, 
    preserveDrawingBuffer: true 
});

Я использовал html2canvas и эту функцию

$(function() { 
    $("#btnSave").click(function() { 
     html2canvas(document.body, { 
      onrendered: function(canvas) { 
       return Canvas2Image.saveAsPNG(canvas); 
      } 
     }); 
    }) 
});

источник

2016-11-30 16:22:07 dgrubman

Скриншот MapBox с использованием html2canvas создает черный jpg

ответ

Смежные вопросы