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

标签 javascript image screenshot html2canvas

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

根据我的研究,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?)

最佳答案

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

var screenshot;

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

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

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

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

关于javascript - 使用 html2canvas 截取 <body> 的屏幕截图并将图像存储为 JS var,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10401350/

相关文章:

c# - 捕获滚动​​窗口内容屏幕截图

c - 使用 X11 的 Xcomposite 扩展获取被覆盖或不可见或最小化的窗口的屏幕截图

javascript - React 尝试从列表中删除项目

c++ - 如何提取给定特定颜色的图像的一部分?

R- 栅格数学,同时保留整数格式

android - ListView 和图像

ios - 将屏幕截图保存到沙箱

javascript - 如何使用最接近js的选择器

javascript - onload=函数 vs window.onload=函数

javascript - ReactJS - 如何通过逗号后的参数设置属性?