你可以使用canvas对页面进行“截图”吗？
我有一个页面，我们使用CSS来定位一堆元素，并使用JS来改变它们的“顶部和左侧”位置。
我有报道说这些东西是错位的，但是用户有这个谎言来“欺骗”的动机，所以我不确定他们是否说实话。 我试图找出一个方法来弄清楚他们是否在说谎，并有一些“证据”。
我知道Canvas有一个方法可以从图像元素或其他canvas元素（BitBlttypes的操作）复制图像信息。
用Canvas（或者其他什么，Flash，不pipe怎样）都可以用一张页面的“图片”？
再次，我不是试图从一个<image> 。 我试图复制用户看到的内容，这些内容由绝对定位的几个HTML元素（以及我最关心的位置）组成，并以某种方式将其上传到服务器。
我知道这不能做，但也许我错过了一些东西。
有任何想法吗？
之前有人问过这个问题，这个问题有点类似。 滚动到YouTube的底部，然后点击“报告错误”链接。 Google的反馈工具（Javascript驱动）基本上就是你所描述的。 从我所看到的代码来看，它使用了canvas，并且有一个基于JavaScript的JPEG编码器，可以生成一个JPG图像发送给Google。
这绝对是很多工作，但我相信你可以完成类似的事情。
如果商业解决scheme是一个选项，请查看SnapEngage 。 点击右上方的“帮助”button即可看到它的作用。 这是一个截图：
安装非常简单，你只需要复制和粘贴几行javascript代码即可。
SnapEngage使用Java Applet截取屏幕截图， 以下是关于它如何工作的博客文章。
是的，你可以看到下面的演示在下面的代码中，我已经在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库，你也可以使用，如果你无法从官方链接find： – https://github.com/niklasvh/html2canvas/downloads [我不负责此链接：P：P：P]
您可以使用目前只支持Firefox的元素 。
background: -moz-element(#mysite);
这里#mysite是其内容被用作背景的元素
在Firefox中打开： http : //jsfiddle.net/qu2kz/3/ （在FF 27上testing）
我不认为你能做到这一点。 但是，您可以recursion地获取clientHeight ， clientWidth ， offsetTop和offsetLeft以确定页面上所有元素的位置并将其发送回服务器。
在Firefox上，您可以创build一个使用canvas.drawWindow将Web内容绘制到canvas的AddOn。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
我认为目前还没有办法在WebKit上做到这一点。
这可以做，有一些限制 。 有一些技巧，这些正是多less扩展做屏幕截图。 从你的描述看来，你似乎没有寻找一个通用的客户端解决scheme来部署，但只是一些用户或一些用户可以使用和提交，所以我想使用扩展将罚款。
铬：
我可以指引您使用我的开源Chrome扩展程序Blipshot，它的确如此： https ： //github.com/folletto/Blipshot
只是给一些背景：
- 你可以这样做，据我所知，只能从一个扩展中，因为它使用了一个内部函数。
- 该函数是
chrome.tabs.captureVisibleTab并需要访问清单中的选项卡。 - 该function只抓取活动选项卡的可见部分，所以如果你需要的话就没问题了。 如果你还需要更多的东西，那么你应该看看整个脚本，因为直到Google修复了Bug＃45209才能获得整个页面的截图，这是相当棘手的。
火狐：
在Firefox 1.5以后，您可以构build扩展，使用自定义的canvas扩展drawWindow ，比Chrome的chrome.tabs.captureVisibleTab更强大。 一些信息在这里： https ： //developer.mozilla.org/en/Drawing_Graphics_with_Canvas
