有可能改善html2canvas屏幕截图吗？

Question

我正在尝试获取复杂网页的屏幕截图。我设法找到的唯一合理的解决方案是html2canvas，但是它不能完全呈现该页面。

这是真实的屏幕截图： 这是html2canvas的输出：

html2canvas(document.body, {
  allowTaint: true,
  width: window.innerWidth,
  height: window.innerHeight,
  scrollX: window.pageXOffset,
  scrollY: window.pageYOffset,
  x: window.pageXOffset,
  y: window.pageYOffset
}).then(function(canvas) {
  var img = canvas.toDataURL("image/png");
  document.write('<img src="' + img + '"/>');
});

我正在使用版本0.5。此源代码直接来自html2canvas主页。

是否有可能对其进行改进，或者有更好的选择吗？我真的不在乎情节，页面的左侧部分让我担心。

P.S。用例是在我们的Web应用程序中添加一个按钮，该按钮将允许用户使用附加的屏幕截图报告错误。

Answer 1

步骤：1

使用超时来应用颜色并拍摄图像。需要时间才能在内部起作用。

html2canvas(document.body, {
  allowTaint: true,
  width: window.innerWidth,
  height: window.innerHeight,
  scrollX: window.pageXOffset,
  scrollY: window.pageYOffset,
  x: window.pageXOffset,
  y: window.pageYOffset
}).then(function(canvas) { // timeout function
  var img = canvas.toDataURL("image/png");
  document.write('<img src="' + img + '"/>');
});

步骤：2

是的，我有解决方案。您可以使用幻影无头浏览器或chrome无头浏览器。

在您的情况下，图表颜色不适用于html2canvas插件中的图表数据和颜色绘制原因。

幻影js，您可以页眉和页脚以及所有自定义内容。