html2canvas 隐藏区域,html2canvas捕获除内部画布内容以外的所有内容

我有一个通过绘制的地图leaflet。

我需要使用制作该地图的屏幕截图html2canvas。

要使用html2canvas,我需要提供一个DOM元素来捕获(elementToCapture)和一个可选的配置(html2canvasConfiguration)。

var html2canvasConfiguration = {

useCORS: true,

width: map._size.x,

height: map._size.y,

backgroundColor: null,

logging: true,

imageTimeout: 0

};

var elementToCapture = map._container.getElementsByClassName('leaflet-pane leaflet-map-pane')[0];

html2canvas(elementToCapture, html2canvasConfiguration).then(function (canvas) {

var link = document.createElement('a');

link.download = 'test.png';

link.href = canvas.toDataURL();

link.click();

link.remove();

})

我按leaflet-pane leaflet-map-pane类提取了一个元素,该元素基本上代表了整个地图,包括控件(放大/缩小按钮,比例等),自定义标记,工具提示,叠加层,弹出窗口。

整个DOM看起来像

我遇到的问题是leaflet-pane leaflet-tile-pane元素(尤其是内部的内容canvas)没有被捕获html2canvas。简而言之,我看到了地图上的所有内容,但看不到地图本身。

6e75ebeb82f2542b78083a2e8a763f9f.png

18b602aac1a38c2b44128446ac58022d.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值