Javascript 当使用captureVisibleTab拍摄整个页面的截图时，如何从图像中裁剪出多余的部分

我正在构建一个chrome扩展，在这里我想截取整个页面的屏幕截图，我使用

chrome.tabs.captureVisibleTab

api截图，当我想截取整个页面的屏幕截图时，我要截取可见部分的屏幕截图并滚动…直到页面结束，但我面临的问题是页面高度不均匀，当我在第二个最后一个滚动时，剩余的页面高度不等于视口高度，我在第二个最后一个图像中得到最后一个图像的一部分，在最后一个图像中得到最后一个图像的一部分

这就是我要说的

这是我处理滚动的内容脚本 内容脚本：

          window.scrollTo(0, 0);

          setTimeout(function () {
            var pageHeight = document.body.scrollHeight;
            const currentScrollPosition = document.documentElement.scrollTop;
            console.log(currentScrollPosition);
            if (pageHeight < 32766) {
              const viewPortHeight = Math.max(
                document.documentElement.clientHeight || 0,
                window.innerHeight || 0
              );

              const numLoops = Math.floor(pageHeight / viewPortHeight);
              var index = 0;

              const screenshotInterval = setInterval(function () {
                chrome.runtime.sendMessage(
                  {
                    message: "snapVisible",
                  },
                  function (response) {
                    if (response.message === "success") {
                      const dataUrl = response.payload.dataUrl;
                      var scrollNode =
                        document.scrollingElement || document.documentElement;
                      screenShots.push(dataUrl);
                      index++;

                      if (index <= numLoops) {
                        scrollNode.scrollTop += window.innerHeight;
                      } else {
                        addSaveButtons();
                        clearInterval(screenshotInterval);
                        numImages = screenShots.length;
                        scrollNode.scrollTop = currentScrollPosition;
                        generateImage();
                      }
                    }
                  }
                );
              }, 300);

              console.log(screenShots);
            }
          }, 100);

background.js（后台脚本）

function generateImage() {
  console.log(screenShots.length);
  screenShots.forEach(function (screenshot) {
    const image = new Image();
    image.src = screenshot;
    // image.onload = checkLoad;
    document.body.appendChild(image);
  });
}

if (request.message === "snapVisible") {
      chrome.tabs.captureVisibleTab(
        null,
        { format: "png" },
        function (dataUrl) {
          sendResponse({ message: "success", payload: { dataUrl: dataUrl } });
        }
      );
      return true;
    }