Question

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

根据我的研究，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？）

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();

使用html2canvas截取屏幕截图并将图像存储为JS var

3 个答案: