Question

我有一个页面，我们使用CSS定位一堆元素，并使用JS更改它们的“顶部和左侧”位置。

我有报道称这些事情已经错位，但是用户有动机谎称这是“欺骗”，所以我不确定他们是否说实话。我正试图找出一种方法来弄清楚他们是否撒谎，并且有一些“证据”。

我知道Canvas有一种从图像元素或其他画布元素（BitBlt操作的类型）复制图像信息的方法。

有可能以某种方式，使用Canvas（或其他东西，Flash，无论如何），拍摄一张页面的“图片”吗？我再次尝试从<image>获取信息。我正在尝试复制用户看到的内容，其中包含绝对定位的几个HTML元素（我最关心这些位置）并以某种方式将其上传到服务器。

我明白这不可能做到，但也许我错过了什么。

有什么想法吗？

Answer 1

有人早些时候问了一个问题，有点类似于此。滚动到Youtube的底部，然后单击“报告错误”链接。谷歌的反馈工具（Javascript驱动），基本上做你所描述的。从我对其代码的看法来看，它使用了canvas并且有一个基于JavaScript的JPEG编码器，可以构建一个JPG图像以发送给Google。

肯定会有很多工作，但我相信你可以完成类似的工作。

Answer 2

如果可以选择商业解决方案，请查看SnapEngage。点击右上角的“帮助”按钮，查看其效果。这是一个截图： -

enter image description here

设置很简单，您只需要复制并粘贴几行javascript代码即可。

SnapEngage使用Java Applet截取屏幕截图，Here是一篇关于其工作原理的博客文章。

Answer 3

是的，您可以参见以下演示在下面的代码中，我在body标签内部定义了表，但是当你运行这段代码时，它将显示图像快照。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
  $(document).ready(function() {
  var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
     alert(data);
     document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
   }
 });
});
</script>       

 </head>
 <body>  
 <h1>Testing</h1>
 <h4>One column:</h4>
 <table border="1">
 <tr>
  <td>100</td>
 </tr>
 </table>
</body>

html2canvas官方文档： - http://html2canvas.hertzen.com/

要下载html2canvas.js库，如果您无法从官方链接中找到，也可以使用： - https://github.com/niklasvh/html2canvas/downloads [我不对此链接负责：P：P：P]

Answer 4

您可以使用目前仅受Firefox支持的element。

background: -moz-element(#mysite);

此处#mysite是其内容用作背景的元素

在Firefox中打开：http://jsfiddle.net/qu2kz/3/ （在FF 27上测试）

snapshot

Answer 5

我认为你不能那样做。但是，您可以递归提取clientHeight，clientWidth，offsetTop和offsetLeft来确定页面上所有元素的位置，并将其发送回服务器。

Answer 6

在Firefox上，您可以创建一个使用canvas.drawWindow将Web内容绘制到画布的AddOn。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

我认为目前在WebKit上没有办法做到这一点。

Answer 7

可以通过一些限制来完成。有一些技术，这些是截图有多少扩展。从您的描述看来，您似乎并不是在寻找一个可以部署的通用客户端解决方案，而只是用户或某些用户可以使用和提交的内容，所以我想使用扩展程序就可以了。

<强>铬：

我可以指向我的开源Chrome扩展程序Blipshot，它确实如此： https://github.com/folletto/Blipshot

给出一些背景知识：

据我所知，您只能从扩展程序内部执行此操作，因为它使用内部函数。
该功能为chrome.tabs.captureVisibleTab，需要访问清单中的标签页。
该函数仅捕获活动选项卡的可见部分，因此如果您只需要它就可以了。如果您需要更多内容，那么您应该查看整个脚本，因为在Google修复Bug #45209之前获取整页截图非常棘手。

<强>火狐：

在1.5以来的Firefox中，您可以构建使用自定义画布扩展程序drawWindow的扩展程序，该扩展程序比Chrome的chrome.tabs.captureVisibleTab等效程序更强大。一些信息在这里： https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

你能用Canvas拍一张页面的“截图”吗？

7 个答案: