Html 您可以使用 Canvas 截取页面的“屏幕截图”吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4340056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you take a "screenshot" of the page using Canvas?
提问by Daniel Magliola
I have a page where we're positioning a bunch of elements using CSS, and changing their "top and left" positions using JS.
我有一个页面，我们使用 CSS 定位一堆元素，并使用 JS 更改它们的“顶部和左侧”位置。
I've had reports that these things have been misaligned, but a user has the motive to lie about this to "cheat", so I'm not exactly sure whether they're telling the truth. I'm trying to find a way to figure out whether they're lying or not, and to have some "proof".
我有报告说这些东西没有对齐，但是用户有动机为此撒谎以“作弊”，所以我不确定他们是否在说实话。我试图找到一种方法来弄清楚他们是否在撒谎，并有一些“证据”。
I know that Canvas has a method to copy image information from an image element, or another canvas element (kind of a BitBlt operation).
我知道 Canvas 有一种方法可以从图像元素或另一个画布元素（一种 BitBlt 操作）复制图像信息。
Would it be possible to somehow, with Canvas (or with something else, Flash, whatever), take a "picture" of a piece of the page?
Again, I'm not trying to take information from an <image>. I'm trying to copy what the user sees, which is comprised of several HTML elements positioned absolutely (and I care most about those positions) and somehow upload that to the server.
是否有可能以某种方式使用 Canvas（或其他东西，Flash 等）拍摄页面的“图片”？
同样，我不是要从<image>. 我试图复制用户看到的内容，它由几个绝对定位的 HTML 元素组成（我最关心这些位置）并以某种方式将其上传到服务器。
I understand this can't be done, but maybe I'm missing something.
我知道这是不可能的，但也许我错过了一些东西。
Any ideas?
有任何想法吗？
回答by simshaun
Somebody asked a question earlier that's somewhat similar to this. Scroll to the bottom of Youtube and click the "Report a Bug" link. Google's Feedback Tool (Javascript driven), essentially does what you described. Judging by what I looked at of its code, it uses canvas and has a JavaScript-based JPEG encoder which builds a JPG image to send off to Google.
之前有人问过一个和这个有点类似的问题。滚动到 Youtube 底部，然后单击“报告错误”链接。谷歌的反馈工具（Javascript 驱动），基本上就是你所描述的。从我查看其代码的情况来看，它使用画布并具有基于 JavaScript 的 JPEG 编码器，可构建 JPG 图像以发送给 Google。
It would definitely be a lot of work, but I'm sure you could accomplish something similar.
这肯定是很多工作，但我相信你可以完成类似的事情。
回答by Salman von Abbas
If a commercial solution is an option, Check out SnapEngage. Click on the "help" button in top-right to see it in action. Here is a screenshot:-
如果可以选择商业解决方案，请查看SnapEngage。单击右上角的“帮助”按钮以查看它的运行情况。这是截图：-
Setup is pretty straight-forward you just have to copy and paste a few lines of javascript code.
设置非常简单，您只需复制并粘贴几行 javascript 代码即可。
SnapEngage uses a Java Applet to take screenshots, Hereis a blog post about how it works.
SnapEngage 使用 Java Applet 截取屏幕截图，这是一篇有关其工作原理的博客文章。
回答by Gourav Makhija
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.
是的，您可以看到以下演示 在下面的代码中，我在 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 official Documentation:- http://html2canvas.hertzen.com/
html2canvas 官方文档：- 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]
要下载 html2canvas.js 库，如果您无法从官方链接中找到，也可以使用：- https://github.com/niklasvh/html2canvas/downloads[我不对此链接负责 :P :P :P]
回答by Jose Rui Santos
You can use the element, that currently is only supported by Firefox.
您可以使用当前仅 Firefox 支持的元素。
background: -moz-element(#mysite);
Here #mysiteis the element whose content is used as background
这#mysite是其内容用作背景的元素
Open in Firefox: http://jsfiddle.net/qu2kz/3/(tested on FF 27)
在 Firefox 中打开：http: //jsfiddle.net/qu2kz/3/（在 FF 27 上测试）
回答by Folletto
It can be done, with some limitations. There are some techniques, and these are exactly how many extensions do screenshots. From your description it seems that you aren't looking for a generic, client side solution to be deployed, but just something that a user or some users could use and submit, so I guess using an extension would be fine.
这是可以做到的，但有一些限制。有一些技巧，这些正是有多少扩展做截图。从您的描述来看，您似乎不是在寻找要部署的通用客户端解决方案，而只是在寻找用户或某些用户可以使用和提交的东西，所以我想使用扩展程序会很好。
Chrome:
铬合金：
I can point you to my opensource Chrome extension, Blipshot, that does exactly that: https://github.com/folletto/Blipshot
我可以向您指出我的开源 Chrome 扩展程序 Blipshot，它就是这样做的：https: //github.com/folletto/Blipshot
Just to give some background:
简单介绍一下背景：
- You can do that, as far as I know, only from inside an extension, since it uses an internal function.
- The function is
chrome.tabs.captureVisibleTaband require access to the tabs from the manifest. - The function grabs only the visible part of the active tab, so if you need just that it's fine. If you need something more, than, you should have a look at the whole script, since it's quite tricky to get the full page screenshot until Google fixes Bug #45209.
- 据我所知，您只能从扩展内部执行此操作，因为它使用内部函数。
- 该功能是
chrome.tabs.captureVisibleTab并且需要访问清单中的选项卡。 - 该函数只抓取活动选项卡的可见部分，所以如果你需要它就可以了。如果你需要更多的东西，你应该看看整个脚本，因为在谷歌修复Bug #45209之前要获得完整的页面截图是非常棘手的。
Firefox:
火狐：
In Firefox since 1.5 you can build extensions that use a custom extension of canvas, drawWindow, that is more powerful than the chrome.tabs.captureVisibleTabequivalent of Chrome. Some informations are here:
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
在 Firefox 1.5 之后，您可以构建使用画布自定义扩展的扩展，drawWindow比chrome.tabs.captureVisibleTabChrome的等价物更强大。一些信息在这里：https:
//developer.mozilla.org/en/Drawing_Graphics_with_Canvas
回答by Ilmari Heikkinen
On Firefox, you can create an AddOn that uses canvas.drawWindow to draw web content to a canvas. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
在 Firefox 上，您可以创建一个使用 canvas.drawWindow 将 Web 内容绘制到画布的插件。https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
I don't think there's a way to do that on WebKit at the moment.
我认为目前在 WebKit 上没有办法做到这一点。
回答by thejh
I don't think that you can do that. However, you could recursively fetch clientHeight, clientWidth, offsetTopand offsetLeftto determine the positions of all elements on the page and send it back to the server.
我不认为你能做到这一点。但是，你可以递归获取clientHeight，clientWidth，offsetTop并offsetLeft确定页面上的所有元素的位置，并将其发送回服务器。
