Question

我正在尝试使用HTML2canvas将我的Leaflet Map捕获为图像，然后将捕获的图像附加到新的Div。成功捕获地图，但捕获的图像上显示没有标记!! 有时我得到了捕获地图上显示的部分图标。这是我的代码：

<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet.js')}" />	
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet-src.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'html2canvas.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'html2canvas.svg.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet-image.js')}" />
<apex:includeScript value="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"/>
<apex:includeScript value="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js"/>


......
......

<script>
				

  var j$ = jQuery.noConflict();
  L_PREFER_CANVAS=true;


  var snapshot = j$("[id$=snapshot]");
  var htmlMap = j$("[id$=mapDiv]");
  button=j$("[id$=snap]");
 

  //This function is called via an apex:commandButton
  function doImage(err,canvas){

    htmlMap = j$("[id$=mapDiv]");
    html2canvas(htmlMap, 
                {
      // proxy: "server.js",
      useCORS: true,
      preferCanvas: true,
      onrendered: function(canvas) 
      {

        var img = canvas.toDataURL("image/png");
        var image=new Image();

        image.setAttribute("src",img);

        console.log(image);
        j$("[id$=snapshot]")[0].appendChild(image);
      }
    });

  }
 
  </script>

这是我的原始地图： Origional Map

这是拍摄快照时的结果

another snapshot

任何想法??

由于

使用HTML2Canvas的传单地图捕获

0 个答案: