拍摄< body>的屏幕截图与html2canvas并将img存储为JS var

问题描述

我试图让我网站上的用户按下按钮以获取当前屏幕的屏幕快照(体内的所有内容).

I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body).

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

From my research, html2canvas seems to be a resource that makes this possible.

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

My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved.

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

以下SO问题(如何使用html2canvas上传屏幕截图?)让我有些困惑.我只想知道此时如何获得图像.

The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to get an image at this point.

根据他的代码.

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

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

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

At this point I am lost where the image is, or even how/when to create it. Ill worry sending it to the server later.

任何信息表示赞赏.谢谢！(甚至需要html2canvas吗?)

Any information appreciated. Thanks! (html2canvas even needed?)

推荐答案

在使用html2canvas jQuery插件时，以下是示例代码段

As you are using the html2canvas jQuery plugin, here is a sample snippet

var screenshot;

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

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

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

In the above code snippet the html2canvas creates the screenshot of the page.

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

You can also use PhantomJS to create screenshots of webpages - provided that they are public pages, because you may not be able to access login protected pages on the server-side; in such situations only a client-side solution like html2canvas will work.

这篇关于拍摄< body>的屏幕截图与html2canvas并将img存储为JS var的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！