可以“截图”一下吗？使用 Canvas 的页面？

发布于 2024-10-05 22:11:39 字数 405 浏览 3 评论 0原文

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

我收到报告称这些事情已经错位，但用户有动机对此撒谎以“作弊”，所以我不确定他们是否说的是实话。我正在想办法找出他们是否在说谎，并找到一些“证据”。

我知道 Canvas 有一种方法可以从图像元素或另一个画布元素复制图像信息（类似于 BitBlt 操作）。

是否有可能以某种方式，使用 Canvas（或使用其他东西，Flash，等等），拍摄页面的一部分的“图片”？
再说一次，我并不是试图从获取信息。我试图复制用户看到的内容，它由几个绝对定位的 HTML 元素组成（我最关心这些位置），并以某种方式将其上传到服务器。

我知道这是不可能的，但也许我错过了一些东西。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不奢求什么 2024-10-12 22:11:39

之前有人问过一个和这个有点相似的问题。滚动到 Youtube 底部并单击“报告错误”链接。 Google 的反馈工具（Javascript 驱动）基本上执行您所描述的操作。从我查看的代码来看，它使用画布并有一个基于 JavaScript 的 JPEG 编码器，可以构建 JPG 图像并发送给 Google。

这肯定需要大量工作，但我相信您可以完成类似的事情。

回复收藏 0 原文

江湖正好 2024-10-12 22:11:39

如果可以选择商业解决方案，请查看 SnapEngage。
单击右上角的“帮助”按钮即可查看其实际情况。这是一个屏幕截图：-

在此处输入图像描述

设置非常简单，您只需复制并粘贴几行即可JavaScript 代码。

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

回复收藏 0 原文

一身仙ぐ女味 2024-10-12 22:11:39

是的，你可以看下面的演示
在下面的代码中，我在 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]

Yes you can See following demo
In below code I have define table inside body tag but when you run this code then it will display image snapshot.

<!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 official Documentation:- http://html2canvas.hertzen.com/

To download html2canvas.js library you can use also if you unable to find from official link :-
https://github.com/niklasvh/html2canvas/downloads
[I am not responsible for this link :P :P :P]

回复收藏 0 原文

‘画卷フ 2024-10-12 22:11:39

您可以使用元素，目前仅支持火狐。

background: -moz-element(#mysite);

这里 #mysite 是其内容用作背景的元素

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

snapshot

You can use the element, that currently is only supported by Firefox.

background: -moz-element(#mysite);

Here #mysite is the element whose content is used as background

Open in Firefox: http://jsfiddle.net/qu2kz/3/
(tested on FF 27)

snapshot

回复收藏 0 原文

终止放荡 2024-10-12 22:11:39

我不认为你能做到这一点。但是，您可以递归地获取 clientHeight，clientWidth, offsetTop 和 offsetLeft 确定页面上所有元素的位置并将其发送回服务器。

回复收藏 0 原文

疯到世界奔溃 2024-10-12 22:11:39

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

我认为目前有一种方法可以在 WebKit 上做到这一点。

回复收藏 0 原文

困倦 2024-10-12 22:11:39

这是可以做到的，但有一些限制。有一些技巧，这些正是许多扩展程序进行屏幕截图的方法。从您的描述来看，您似乎并不是在寻找要部署的通用客户端解决方案，而只是在寻找用户或某些用户可以使用和提交的东西，所以我想使用扩展程序就可以了。

Chrome：

我可以向您推荐我的开源 Chrome 扩展程序 Blipshot，它的作用正是如此：
https://github.com/folletto/Blipshot

只是提供一些背景知识：

你可以这样做，据我所知，只能从扩展内部，因为它使用内部函数。
该函数是 chrome.tabs.captureVisibleTab ，需要从清单访问选项卡。
该函数仅抓取活动选项卡的可见部分，因此如果您只需要它就可以了。如果您需要更多内容，那么您应该查看整个脚本，因为在 Google 修复错误#45209。

Firefox：

从 1.5 版开始，您可以在 Firefox 中构建使用自定义画布扩展 drawWindow 的扩展，该扩展比 chrome.tabs.captureVisibleTab 更强大代码>相当于Chrome。一些信息在这里：
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas