使用html2canvas截图MapBox创建一个黑色的JPG

我设法保存在我的硬盘驱动器上使用html2canvas使用Google Maps API生成的地图的屏幕截图。我现在试着用MapBox API做同样的事情，而我在硬盘上得到的所有内容都是黑屏jpg。使用html2canvas截图MapBox创建一个黑色的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地图地图，但没关系。你有什么想法吗？

来源

2015-12-23 Biloutage

Mapbox有一个内置的截屏API：

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

谢谢你，但是这个截图API不与mapbox-GL API工作。尽管如此，它对传统的地图箱地图很有用。 – Biloutage

嗡嗡声...因为它的webgl/canvas我们在谈论我敢打赌，你可以从中获取图像数据。请参阅我的编辑代码 – glued

它的作用就像一个魅力。谢谢。 – Biloutage

确保preservedrawingbuffer设置为true在地图初始化

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

使用html2canvas截图MapBox创建一个黑色的JPG

回答

相关问题