多边形上的谷歌地图使用html2canvas

我一直在试图采取的地图我工作的“截图”和终于能使用html2canvas的组合和回答这样做时，玷污帆布from this previous SO post.多边形上的谷歌地图使用html2canvas

但是，在地图上绘制多边形或折线（使用绘图管理器或google.maps.polygon）时，画布突然变得污染，无法使用toDataURL（）导出。以下错误产生在成功画布渲染（HTTP删除，由于2链路最大津贴）：

未捕获的抛出：DOMException：未能执行上 “HTMLCanvasElement”“toDataURL”：被污染的帆布不得出口。（：//127.0.0.1/code/html2canvas.js：2711：15） at Object.onrendered（：//127.0.0.1/code/WorkingCode.html:188:31）开始（：//127.0.0.1/code/html2canvas.js：2215：17）在HTMLImageElement.img.onload（：//127.0.0.1/code/html2canvas.js：2352：7）

我已经研究过这个问题，并且没有明确的答案，为什么会发生这种情况！我知道多边形的“屏幕截图”应该工作，因为上述链接（also seen here on the web）中的地图能够做到这一点。

我们两个代码之间的区别并不清楚为什么一个人会工作，而另一个不会，因为我使用相同的代码。

所以我想我有两个问题A）怎么样多边形污染画布（即有一个文件，我应该找一个CORS头？B）为什么相同的代码工作在一个实例，并在另一个失败。

我的代码的一些背景： 1）我通过windows上的Xampp服务器（apache）在本地运行一切。 2）地图是通过谷歌地图API生成的，就像多边形一样。 3）html2canvas.js位于我的网页所在的工作文件夹中。

我附上了一些相关的代码，希望能更清楚地知道我在做什么。

来源：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&libraries=geometry,drawing,places&callback=initAutoComplete" 
async defer></script> 
<script type="text/javascript" src="http://127.0.0.1/LawnCareMapping/html2canvas.js" 
></script>

截图

<button onclick="Calc()"></button> 
function Calc(){ 

     //New Method from StackExchange solution 
     //get transform value 
     var transform=$('.gm-style>div:first>div').css('transform') 
     var comp=transform.split(',') //split up the transform matrix 
     var mapleft=parseFloat(comp[4]) //get left value 
     var maptop=parseFloat(comp[5]) //get top value 
     $('.gm-style>div:first>div').css({ //get the map container. not sure if stable 
     'transform':'none', 
     'left':mapleft, 
     'top':maptop, 
     }); 

     html2canvas($('#map'), 
     { 
     //proxy: "http://127.0.0.1/html2canvasproxy.php", 
     useCORS: true, 
     logging: true, 
     onrendered: function(canvas) 
     { 
      var dataUrl= canvas.toDataURL(); 

      window.open (dataUrl); 
      $('.gm-style>div:first>div').css({ 
      left:0, 
      top:0, 
      'transform':transform 
      }) 
     } 
     }); 
    };

地图和多边形

var location = new google.maps.LatLng(42.886273, -74.870589); 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: location, 
      zoom: 8, 
      mapTypeId: 'hybrid', 
      draggableCursor:"crosshair", 
     }); 

Shape && Shape.setMap(null) 
    Shape = new google.maps.Polygon({ 
    paths: Points, 
    strokeColor:"#fff", 
    strokeOpacity: .5, 
    strokeWeight: 2, 
    fillColor: "#fff", 
    fillOpacity: .5, 
    editable: !0, 
    clickable: false 
    }); 
plowShape[plowCoordInd].setMap(map);

编辑：

我已删除了我的网站的链接。

来源

2016-12-31 zack pecenak

我使用多边形获取地图的导出图像（在实时页面上）。我们如何复制污染的画布？你能否提供一个能证明问题的[mcve]？ – geocodezip

这是否也发生在不同的浏览器中（例如在FF中尝试）。这是否也发生在最新的html2canvas版本？ – Kaiido

@geocodezip - 感谢您的回应！我添加了一个链接，以便您可以直接访问我的网站。 –

我想通了。

这个问题是由于地图上的标记！我在搜索框中使用了标记，并且还有一个自定义标记来指示兴趣点。

一旦我删除了两个标记，污染问题就消失了，现在我可以添加多边形了！

要补救标记，我只是使用自定义标记，我上传到我的服务器。

来源

2017-01-03 18:24:00

多边形上的谷歌地图使用html2canvas

回答

相关问题