使用html2canvas时，谷歌 Map 上的多边形会使画布变粗糙

我一直在尝试拍摄我正在制作的 Map "screenshot"，并且终于能够通过使用html2canvas和答案from this previous SO post.的组合来实现它 .

但是，在 Map 上绘制多边形或折线时（使用绘图管理器或google.maps.polygon），画布突然变得污染，无法使用toDataURL（）导出 . 成功进行画布渲染后会产生以下错误（由于2个链接最大限额而删除了http）：

未捕获DOMException：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布 . 在Object.options.complete（：//127.0.0.1/code/html2canvas.js：2711：15）的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）

我已经研究过这个问题，并且没有明确的答案为什么会发生这种情况！我知道带有多边形的"screenshot"应该可以工作，因为前面提到的链接（also seen here on the web）中的 Map 能够做到 .

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

所以我想我有两个问题A）多边形如何污染画布（即是否有一个文件，我应该寻找一个CORS Headers ？B）为什么相同的代码在一个实例中工作而在另一个实例中失败 .

关于我的代码的一些背景知识：1）我在Windows上通过Xampp服务器（apache）在本地运行所有内容 . 2） Map 是通过谷歌 Map 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
          })
        }
      });
    };

Map 和多边形

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);

编辑：

我删除了我的网站链接 .