谷歌的“报告错误”或“反馈工具”让你选择浏览器窗口的一个区域来创建一个截图,并提交你对错误的反馈。
截图来自Jason Small,发布在一个重复的问题中。
他们是怎么做到的?谷歌的JavaScript反馈API从这里加载,反馈模块的概述将演示截图功能。
谷歌的“报告错误”或“反馈工具”让你选择浏览器窗口的一个区域来创建一个截图,并提交你对错误的反馈。
截图来自Jason Small,发布在一个重复的问题中。
他们是怎么做到的?谷歌的JavaScript反馈API从这里加载,反馈模块的概述将演示截图功能。
当前回答
你的web应用现在可以使用getUserMedia()截取客户端整个桌面的“原生”截图:
来看看这个例子:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
客户端将不得不使用chrome(目前),将需要启用chrome://标志下的屏幕捕捉支持。
其他回答
JavaScript可以读取DOM,并使用画布呈现相当准确的DOM表示。我一直在编写一个脚本,将HTML转换为画布图像。今天决定把它实现成像你描述的那样发送反馈。
该脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图,以及表单。截图是基于DOM的,因此可能不是100%准确的真实表示,因为它不制作实际的截图,而是根据页面上可用的信息构建截图。
它不需要来自服务器的任何渲染,因为整个图像是在客户机的浏览器上创建的。HTML2Canvas脚本本身仍然处于一个非常实验性的状态,因为它不能解析我想要的CSS3属性,即使有代理可用,它也不支持加载CORS图像。
浏览器兼容性仍然非常有限(不是因为不支持更多,只是还没有时间让它更支持跨浏览器)。
想了解更多信息,请看下面的例子:
http://hertzen.com/experiments/jsfeedback/
编辑 html2canvas脚本现在可以分别在这里和一些例子。
编辑2 谷歌使用非常相似的方法(事实上,根据文档,唯一主要的区别是他们的异步遍历/绘制方法)可以在谷歌反馈团队的Elliott Sprehn的演示中找到: http://www.elliottsprehn.com/preso/fluentconf/
这是一个完整的截图示例,可以在2021年使用chrome浏览器。最终结果是一个准备传输的blob。流程是:请求媒体>抓取帧>绘制到画布>传输到blob。如果你想更有效地使用内存探索OffscreenCanvas或者ImageBitmapRenderingContext
https://jsfiddle.net/v24hyd3q/1/
// Request media
navigator.mediaDevices.getDisplayMedia().then(stream =>
{
// Grab frame from stream
let track = stream.getVideoTracks()[0];
let capture = new ImageCapture(track);
capture.grabFrame().then(bitmap =>
{
// Stop sharing
track.stop();
// Draw the bitmap to canvas
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
// Grab blob from canvas
canvas.toBlob(blob => {
// Do things with blob here
console.log('output blob:', blob);
});
});
})
.catch(e => console.log(e));
这里有一个使用getDisplayMedia的例子
document.body.innerHTML = '<video style="width: 100%; height: 100%; border: 1px black solid;"/>';
navigator.mediaDevices.getDisplayMedia()
.then( mediaStream => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = e => {
video.play();
video.pause();
};
})
.catch( err => console.log(`${err.name}: ${err.message}`));
同样值得一看的还有Screen Capture API文档。
你可以试试我的新JS库:截图. JS。
它可以拍摄真实的屏幕截图。
你加载脚本:
<script src="https://raw.githubusercontent.com/amiad/screenshot.js/master/screenshot.js"></script>
并截屏:
new Screenshot({success: img => {
// callback function
myimage = img;
}});
您可以在项目页面中阅读更多选项。
你的web应用现在可以使用getUserMedia()截取客户端整个桌面的“原生”截图:
来看看这个例子:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
客户端将不得不使用chrome(目前),将需要启用chrome://标志下的屏幕捕捉支持。