html2canvas 剪切左上角的图像

Question

我的 HTML 中有一张地图，我正在使用 html2canvas 将其转换为用于打印的图像。

这是我加载页面时 HTML 中的地图：

这是我生成的图像

使用此代码

var map = document.getElementById('FirstMap_CongestionDetail');

html2canvas(map, { scale: 0.5 }).then(canvas => {
    var imageData = canvas.toDataURL();
    //More code below
});

它似乎在左上角被切断了。它没有隐藏（我已经检查了填充、边距和溢出隐藏）。

这是生成原始图像的html代码：

<div class="leafletMainMap spainCommunities leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" id="FirstMap_CongestionDetail" tabindex="0" style="position: relative; min-height: 0px; min-width: 0px; height: 553px;">

我检查了 css 文件中的类，似乎没有一个是问题。

我见过与 html2canvas 相关的问题，这些问题与尝试将所有 HTML 转换为画布时内容被切断有关，通常通过删除滚动来解决这些问题。

我已经尝试过以下方法，但没有成功：

https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530

我也尝试手动修改高度和宽度，但它只会使图像变大或变小。还是断了。

知道为什么图像被剪掉吗？

Answer 1

再次阅读文档后，我发现您可以使用参数

x

和

y

来移动内容：

function getParams() {
  if(document.querySelector('.spainCommunities')) {
    return { width: 680, height: 500, x: -130, y: -60 };
  } 
  return { width: 420, height: 420, x: -92, y: -88 };
}

问题解决了！