使用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

回答

相關問題