有可能改进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主页。

有可能以某种方式改善它，还是有更好的选择？我真的不关心这些情节，页面左侧部分关注我。

附：用例是在我们的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步

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

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

Phantomjs你可以标题页脚和所有自定义。