无法使用Html2Canvas将div的内容绘制到画布上而不会超时

时间:2014-10-28 09:34:54

标签: javascript canvas html2canvas webpage-screenshot

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

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上,它永远不会在没有超时的情况下工作。

0 个答案:

没有答案