使用 html2canvas 截取 <body> 的屏幕截图并将图像存储为 JS var答案

【问题标题】：Take screenshot of <body> with html2canvas and store img as JS var使用 html2canvas 截取 <body> 的屏幕截图并将图像存储为 JS var
【发布时间】：2014-12-03 18:31:38
【问题描述】：

我试图让我网站上的用户按下按钮来截取当前屏幕的屏幕截图（正文中的所有内容）。

根据我的研究，html2canvas 似乎是使这成为可能的资源。

我的问题是文档没有提供示例代码，我正在努力掌握所涉及的步骤。

http://html2canvas.hertzen.com/documentation.html

以下 SO 问题 (How to upload a screenshot using html2canvas?) 让我有些困惑。我现在只想知道如何获取图像。

来自他的代码。

$(window).ready(function(){
    ('body').html2canvas();
    var canvasRecord = new html2canvas(document.body).canvas;

     //At this point does the .toDataURL method return a png?
});

此时我不知道图像在哪里，甚至不知道如何/何时创建它。我会担心稍后将其发送到服务器。

任何信息表示赞赏。谢谢！（甚至需要html2canvas？）

【问题讨论】：

您可能还想考虑一些基于 phantomjs 的屏幕截图解决方案。查看on the PhantomJS wiki（搜索“屏幕截图”）或考虑this node.js/phantom project。
你可能想看看readme file的使用部分。

标签： javascript image screenshot html2canvas

【解决方案1】：

当您使用 html2canvas jQuery 插件时，这里是一个示例 sn-p

var screenshot;

$('body').html2canvas({
  onrendered: function(canvas) {
    screenshot = canvas.toDataURL();

    //code to process/send the image to server
  }
});

在上面的代码中，sn-p html2canvas 创建了页面的截图。

您还可以使用 PhantomJS 来创建网页的屏幕截图 - 前提是它们是公共页面，因为您可能无法访问服务器端的登录保护页面；在这种情况下，只有像 html2canvas 这样的客户端解决方案才能工作。

【讨论】：

可以在客户端运行 phantomjs 吗？
phantomjs 不是一个 javascript 库，它是一个没有用户界面的 webkit 浏览器。所以你不能在客户端运行它。您可以使用usersnap.com 等服务来获取您的网站/应用程序的屏幕截图。

【解决方案2】：

$("#screenshot").click(function() {
  $("body").html2canvas({
    onrendered: function( canvas ) {
      $(".filt_opt_n").html(canvas);
      //window.open(img);
    }
  });
});
<div id="screenshot"></div>

.filt_opt_n 这是一个 div，你想显示对我有用的输出

【讨论】：

【解决方案3】：

可能是一个老问题。你可以试试这个！

var htmlCanvas = new html2canvas(document.body);
var queue = htmlCanvas.parse();
var canvas = htmlCanvas.render(queue, { elements: { length: 1} });
var img = canvas.toDataURL();

【讨论】：