google 地图上的多边形在使用 html2canvas 时存在污点 canvas

Question

我一直在尝试获取我正在处理的地图的 "screenshot"，最终能够通过结合使用 html2canvas 和答案 from this previous SO post. 来完成

然而，当在地图上绘制多边形或折线时（使用绘图管理器或 google.maps.polygon），canvas 突然被污染并且无法使用 toDataURL() 导出。在成功 canvas 呈现后会产生以下错误（由于 2 link 最大允许量而删除了 http）：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Object.onrendered (://127.0.0.1/code/WorkingCode.html:188:31) at Object.options.complete (://127.0.0.1/code/html2canvas.js:2711:15) at start (://127.0.0.1/code/html2canvas.js:2215:17) at HTMLImageElement.img.onload (://127.0.0.1/code/html2canvas.js:2352:7)

我已经研究过这个问题，但没有明确的答案为什么会这样！我知道带有多边形的 "screenshot" 应该可以工作，因为前面提到的 link (also seen here on the web) 中的地图能够做到这一点。

我们的两个代码之间的区别尚不清楚为什么一个可以工作而另一个不能，因为我使用的是相同的代码。

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

我的代码的一些背景： 1) 我通过 windows 上的 Xampp 服务器 (apache) 在本地运行一切。 2) 地图是通过 google maps 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);

编辑：

我删除了我的网站 link。

Answer 1

我想通了。

问题是地图上的标记引起的！我为我的搜索框使用了标记，我还有一个自定义标记来指示兴趣点。

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

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

google 地图上的多边形在使用 html2canvas 时存在污点 canvas

Polygon on google maps taints canvas when using html2canvas

javascript

canvas

polygon

google-maps-api-3

html2canvas