javascript - 使用 html2canvas 截屏并将 img 存储为 JS var

Question

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

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

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

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

以下 SO 问题（如何使用 html2canvas 上传屏幕截图？）让我有点困惑。我现在只想知道如何获取图像。

从他的代码。

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

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

在这一点上，我迷失了图像的位置，甚至迷失了如何/何时创建它。我会担心稍后将其发送到服务器。

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

Answer 1

当您使用 html2canvas jQuery 插件时，这里是一个示例片段

var screenshot;

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

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

在上面的代码片段中，html2canvas 创建了页面的屏幕截图。

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

Answer 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，你想显示对我有用的输出

Answer 3

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

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