3

我正在尝试使用以下代码在我的网络应用程序中捕获部分网页的屏幕截图。

function getScreenshot(){
  var content = document.querySelectorAll("div.class")[0];
  setTimeout(function(){captureScreenshot()},10);
  function captureScreenshot() {
    html2canvas(content, {
        onrendered: function(canvas) {
            var newImg = document.createElement("img");
            newImg.src = canvas.toDataURL();
            var newAnchor = document.createElement("a");
            newAnchor.href = newImg.src;
            newAnchor.download = "screenshot.png";
            newAnchor.id="screenshot";
            document.body.appendChild(newAnchor);
            newAnchor.click();
        }
    });
  }
}

上面的代码在所有浏览器上都可以正常工作，我可以很好地得到 png。但是，如果我在没有 setTimeout 的情况下调用 captureScreenshot 方法，它就不能正常工作？即在画布上没有绘制任何内容。

function getScreenshot(){
  var content = document.querySelectorAll("div.class")[0];
  captureScreenshot();
  function captureScreenshot() {
    html2canvas(content, {
        onrendered: function(canvas) {
            var newImg = document.createElement("img");
            newImg.src = canvas.toDataURL();
            var newAnchor = document.createElement("a");
            newAnchor.href = newImg.src;
            newAnchor.download = "screenshot.png";
            newAnchor.id="screenshot";
            document.body.appendChild(newAnchor);
            newAnchor.click();
        }
    });
  }
}

我尝试过单步执行 html2Canvas 的源代码，但我似乎仍然无法弄清楚为什么我需要超时？我的解决方案有效，但我只需要确切知道导致超时的原因是什么？

好的，所以只是一些额外的信息，在 Chrome 和 IE 上它大部分时间都可以在没有超时的情况下工作，但在 Firefox 上，它在没有超时的情况下永远不会工作。

4

0 回答 0