Question

我一直在尝试拍摄我正在制作的地图的“屏幕截图”，并最终通过使用html2canvas和答案from this previous SO post.

的组合来实现

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

未捕获DOMException：无法执行'toDataURL' 'HTMLCanvasElement'：可能无法导出受污染的画布。 at Object.onrendered（：//127.0.0.1/code/WorkingCode.html:188:31）在Object.options.complete（：//127.0.0.1/code/html2canvas.js：2711：15）在开始时（：//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);

编辑：

我删除了我的网站链接。

Answer 1

我明白了。

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

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

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

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

1 个答案: