使用HTML5 / Canvas / JavaScript获取浏览器屏幕截图

Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google的"报告错误"或"反馈工具"允许您选择浏览器窗口的一个区域来创建一个屏幕截图，该截图与您对错误的反馈一起提交。

Google Feedback Tool Screenshot 。_{jason small的截图，发布在一个重复的问题中。}

他们是怎么做到的？Google的javascript反馈API是从这里加载的，它们对反馈模块的概述将演示屏幕截图功能。

相关讨论

javascript可以读取DOM，并使用canvas呈现出一个相当精确的表示。我一直在编写一个将HTML转换为画布图像的脚本。今天决定像您描述的那样执行它来发送反馈。

该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图是基于DOM的，因此可能不完全精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上的可用信息构建屏幕截图。

它不需要从服务器进行任何渲染，因为整个图像是在客户机的浏览器上创建的。HTML2canvas脚本本身仍然处于非常实验的状态，因为它没有解析我希望它解析的CSS3属性，也不支持加载CORS图像，即使有代理可用。

浏览器兼容性仍然相当有限(不是因为无法支持更多功能，只是没有时间让它更受跨浏览器支持)。

有关更多信息，请查看以下示例：

http://hertzen.com/experimentals/jsfedback/

编辑html2canvas脚本现在在这里单独提供，在这里提供一些示例。

编辑2谷歌反馈团队的Elliott Sprehn在本演示文稿中还确认了谷歌使用非常相似的方法(事实上，基于文档，唯一的主要区别是它们的异步遍历/绘制方法)：http://www.elliottsprenhn.com/preso/fluentconf/

相关讨论

非常酷，Sikuli或Selenium可能有助于访问不同的站点，将测试工具中的站点快照与HTML2canvas.js渲染的像素相似性图像进行比较！想知道您是否可以使用一个非常简单的公式求解器自动遍历DOM的某些部分，以找到如何为getboundingclientrect不可用的浏览器解析备用数据源。如果它是开放源码的话，我可能会使用它，我自己也在考虑玩弄它。干得好，尼古拉斯！
@Luke Stanley我很可能会在这个周末在Github上抛出消息来源，在那之前我还想做一些小的清理和更改，以及摆脱它目前不必要的jquery依赖性。
关于getBoundingClientRect，我实际上做的第一个版本是没有它的，基于记住父元素位置和应用填充的空白以及所有这些手工操作，但是结果并不那么准确。使用getboundingclientrect，即使对文本进行了一些操作，也可以得到像素精确的结果。
很酷的东西。大约46%的顶级网站使用jquery，这意味着您可能可以使用已经在浏览器缓存中的cdn版本。我不认为这是一个大问题，依靠它这些天。来源：trends.builtwith.com/javascript/jquery
源代码现在可以在github.com/niklasvh/html2canvas上找到，其中的一些脚本示例正在使用html2canvas.hertzen.com。还有很多bug需要修复，所以我不建议在实时环境中使用该脚本。
还有一些绘图框架，比如Raphael，您可以在这里使用，而不是HTML5画布，当HTML5画布获得所有主要浏览器的完全支持时，它能够使其可插入。只是一个想法。伟大的工作。
是否打算使用停电功能或可配置的black out all $('.private')来推进此项工作？
@米哈伊尔当然，一旦基本截图处于我认为可以/应该在生产中使用的状态。
你好，Niklas。你能举个例子说明如何只生成一个元素而不是整个页面的屏幕截图吗？
@我在github.com/niklasvh/html2canvas/issues/56回复了这个问题。
任何让SVG工作的解决方案都将是一个很大的帮助。它不适用于highcharts.com
@JagDeep是WebKit中的一个bug
@Niklas感谢你的回复。是否有其他替代方案或解决方案？
html2canvas.hertzen.com可能会有所帮助
@Niklas有没有一种方法可以在网站上录制用户活动的视频，而不仅仅是截屏？
这个还能用吗？因为你网站上的例子在提交文本后会卡住。
JS不读取DOM，JS读取已呈现的文档。
@Machado，它读取DOM并基于它呈现文档的表示。JS无法读取浏览器正在呈现的内容。
tldr:您可以使用dom访问文档。"文档对象模型提供了一组用于表示HTML和XML文档的标准对象，一个关于如何组合这些对象的标准模型，以及用于访问和操作这些对象的标准接口。"……"(w3.org/tr/1998/rec-dom-level-1-19981001)。您不能访问DOM，您可以访问文档本身，因为JS实现了DOM，这是一组指令。
@Machado我访问DOM没有问题。有关更多信息，请访问developer.mozilla.org/en-us/docs/web/api/document_object_mod&zwnj；&8203；el/&hellip；了解详细介绍。
@尼古拉斯祝贺你，伟大的工程。一个(可能是愚蠢的)问题——它能"截屏"一个从外部服务器调用的javascript小部件吗？比如说，像Facebook提供的"像我们"小部件？我注意到Twitter"关注我们"小部件没有呈现。如果没有，有办法吗？
@理想化它取决于小部件是如何实现的。如果它添加了一个跨源代码的iframe(就像twitter一样)，那么html2canvas就不能读取该iframe的内容。但是，如果小部件向当前文档的DOM中注入了一些内容，那么HTML2canvas就可以很好地呈现这些内容。
@我看到你的例子发展成了一个真正的项目。也许更新你对项目实验性质最乐观的评论。在将近900次提交之后，我认为这不仅仅是一个实验；-)

现在，您的Web应用程序可以使用getUserMedia()对客户端的整个桌面进行"本地"截图：

看看这个例子：

https://www.webrtc-experiment.com/pluginfree-screen-sharing/

客户端必须使用chrome(目前)，并且需要在chrome://flags下启用屏幕捕获支持。

相关讨论

正如Niklas提到的，您可以使用html2canvas库在浏览器中使用JS截图。在这一点上，我将通过提供使用此库截图的示例来扩展他的答案：

1
2
3
4
5
6
7
8
9
10
11
12
13

1
2
3
4

.container {
margin-top: 10px;
border: solid 1px black;
}

1
2
3
4
5
6

在onrendered中的report()函数中，获取图像作为数据uri后，可以向用户显示，并允许用户用鼠标绘制"bug区域"，然后向服务器发送截图和区域坐标。

在这个例子中，制作了async/await版本：带有漂亮的makeScreenshot()函数。

更新

简单的示例，允许您截图、选择区域、描述错误和发送POST请求(这里是jsFiddle)(主要功能是report())。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

async function report() {
let screenshot = await makeScreenshot(); // png dataUrl
let img = q(".screen");
img.src = screenshot;

let c = q(".bug-container");
c.classList.remove('hide')

let box = await getBox();
c.classList.add('hide');

send(screenshot,box); // sed post request with bug image, region and description
alert('To see POST requset with image go to: chrome console > network tab');
}

// ----- Helper functions

let q = s => document.querySelector(s); // query selector helper
window.report = report; // bind report be visible in fiddle html

async function makeScreenshot(selector="body")
{
return new Promise((resolve, reject) => {
let node = document.querySelector(selector);

html2canvas(node, { onrendered: (canvas) => {
let pngUrl = canvas.toDataURL();
resolve(pngUrl);
}});
});
}

async function getBox(box) {
return new Promise((resolve, reject) => {
let b = q(".bug");
let r = q(".region");
let scr = q(".screen");
let send = q(".send");
let start=0;
let sx,sy,ex,ey=-1;
r.style.width=0;
r.style.height=0;

let drawBox= () => {
r.style.left = (ex > 0 ? sx : sx+ex ) +'px';
r.style.top = (ey > 0 ? sy : sy+ey) +'px';
r.style.width = Math.abs(ex) +'px';
r.style.height = Math.abs(ey) +'px';
}

//console.log({b,r, scr});
b.addEventListener("click", e=>{
if(start==0) {
sx=e.pageX;
sy=e.pageY;
ex=0;
ey=0;
drawBox();
}
start=(start+1)%3;
});

b.addEventListener("mousemove", e=>{
//console.log(e)
if(start==1) {
ex=e.pageX-sx;
ey=e.pageY-sy
drawBox();
}
});

send.addEventListener("click", e=>{
start=0;
let a=100/75 //zoom out img 75%
resolve({
x:Math.floor(((ex > 0 ? sx : sx+ex )-scr.offsetLeft)*a),
y:Math.floor(((ey > 0 ? sy : sy+ey )-b.offsetTop)*a),
width:Math.floor(Math.abs(ex)*a),
height:Math.floor(Math.abs(ex)*a),
desc: q('.bug-desc').value
});

});
});
}

function send(image,box) {

let formData = new FormData();
let req = new XMLHttpRequest();

formData.append("box", JSON.stringify(box));
formData.append("screenshot", image);

req.open("POST", '/upload/screenshot');
req.send(formData);
}

1
2
3
4
5
6

.bug-container { background: rgb(255,0,0,0.1); margin-top:20px; text-align: center; }
.send { border-radius:5px; padding:10px; background: green; cursor: pointer; }
.region { position: absolute; background: rgba(255,0,0,0.4); }
.example { height: 100px; background: yellow; }
.bug { margin-top: 10px; cursor: crosshair; }
.hide { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

相关讨论