Google 的“报告错误”或“反馈工具”可让您选择浏览器窗口的一个区域来创建屏幕截图，并与您对错误的反馈一起提交。
Jason Small 的截图，发布在一个重复的问题中。
他们是如何做到这一点的？Google 的 JavaScript 反馈 API 是从这里加载的，他们对反馈module的概述将演示屏幕截图功能。
使用 HTML5/Canvas/JavaScript 在浏览器中截取屏幕截图
IT技术
javascript
html
canvas
screenshot
html2canvas
2021-01-17 20:15:46
6个回答
JavaScript 可以读取 DOM 并使用canvas. 我一直在研究将 HTML 转换为画布图像的脚本。今天决定将其实现为发送您所描述的反馈。
该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于 DOM，因此可能无法 100% 准确真实呈现，因为它不会制作实际屏幕截图，而是根据页面上的可用信息构建屏幕截图。
它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。HTML2Canvas 脚本本身仍处于非常实验性的状态，因为它几乎没有解析我想要的 CSS3 属性，也没有任何支持加载 CORS 图像，即使代理可用。
仍然相当有限的浏览器兼容性（不是因为不能支持更多，只是没有时间让它更支持跨浏览器）。
有关更多信息，请查看此处的示例：
http://hertzen.com/experiments/jsfeedback/
编辑 html2canvas 脚本现在可以在此处单独使用，在此处提供一些示例。
编辑 2 谷歌反馈团队的 Elliott Sprehn 在这个演示文稿中可以找到谷歌使用非常相似的方法（实际上，根据文档，唯一的主要区别是它们的异步遍历/绘图方法）的另一个确认： http: //www.elliottsprehn.com/preso/fluentconf/
您的网络应用程序现在可以使用getUserMedia()以下命令获取客户端整个桌面的“本机”屏幕截图：
看看这个例子：
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
客户端必须使用 chrome（目前）并且需要在 chrome://flags 下启用屏幕捕获支持。
概念验证
正如Niklas 提到的，您可以使用html2canvas库在浏览器中使用 JS 截取屏幕截图。在这一点上，我将通过提供一个使用此库（“概念证明”）截取屏幕截图的示例来扩展他的回答：
在获取图像作为数据 URI 后的report()函数中onrendered，您可以将其显示给用户并允许他通过鼠标绘制“错误区域”，然后将屏幕截图和区域坐标发送到服务器。
在本示例中 async/await，制作了版本：具有很好的makeScreenshot()功能。
更新
简单的例子，它允许你截屏、选择区域、描述错误和发送 POST 请求（这里是 jsfiddle）（主要功能是report()）。
使用getDisplayMedia API以 Canvas 或 Jpeg Blob / ArrayBuffer 的形式获取屏幕截图：
修复 1：使用 getUserMedia 和 chromeMediaSource 仅用于 Electron.js
修复 2：抛出错误而不是返回空对象
修复 3：修复演示以防止错误：getDisplayMedia must be called from a user gesture handler
// docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
// see: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/#20893521368186473
// see: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Pluginfree-Screen-Sharing/conference.js
function getDisplayMedia(options) {
if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
return navigator.mediaDevices.getDisplayMedia(options)
}
if (navigator.getDisplayMedia) {
return navigator.getDisplayMedia(options)
}
if (navigator.webkitGetDisplayMedia) {
return navigator.webkitGetDisplayMedia(options)
}
if (navigator.mozGetDisplayMedia) {
return navigator.mozGetDisplayMedia(options)
}
throw new Error('getDisplayMedia is not defined')
}
function getUserMedia(options) {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
return navigator.mediaDevices.getUserMedia(options)
}
if (navigator.getUserMedia) {
return navigator.getUserMedia(options)
}
if (navigator.webkitGetUserMedia) {
return navigator.webkitGetUserMedia(options)
}
if (navigator.mozGetUserMedia) {
return navigator.mozGetUserMedia(options)
}
throw new Error('getUserMedia is not defined')
}
async function takeScreenshotStream() {
// see: https://developer.mozilla.org/en-US/docs/Web/API/Window/screen
const width = screen.width * (window.devicePixelRatio || 1)
const height = screen.height * (window.devicePixelRatio || 1)
const errors = []
let stream
try {
stream = await getDisplayMedia({
audio: false,
// see: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/video
video: {
width,
height,
frameRate: 1,
},
})
} catch (ex) {
errors.push(ex)
}
// for electron js
if (navigator.userAgent.indexOf('Electron') >= 0) {
try {
stream = await getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
// chromeMediaSourceId: source.id,
minWidth : width,
maxWidth : width,
minHeight : height,
maxHeight : height,
},
},
})
} catch (ex) {
errors.push(ex)
}
}
if (errors.length) {
console.debug(...errors)
if (!stream) {
throw errors[errors.length - 1]
}
}
return stream
}
async function takeScreenshotCanvas() {
const stream = await takeScreenshotStream()
// from: https://stackoverflow.com/a/57665309/5221762
const video = document.createElement('video')
const result = await new Promise((resolve, reject) => {
video.onloadedmetadata = () => {
video.play()
video.pause()
// from: https://github.com/kasprownik/electron-screencapture/blob/master/index.js
const canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const context = canvas.getContext('2d')
// see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
resolve(canvas)
}
video.srcObject = stream
})
stream.getTracks().forEach(function (track) {
track.stop()
})
if (result == null) {
throw new Error('Cannot take canvas screenshot')
}
return result
}
// from: https://stackoverflow.com/a/46182044/5221762
function getJpegBlob(canvas) {
return new Promise((resolve, reject) => {
// docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
canvas.toBlob(blob => resolve(blob), 'image/jpeg', 0.95)
})
}
async function getJpegBytes(canvas) {
const blob = await getJpegBlob(canvas)
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.addEventListener('loadend', function () {
if (this.error) {
reject(this.error)
return
}
resolve(this.result)
})
fileReader.readAsArrayBuffer(blob)
})
}
async function takeScreenshotJpegBlob() {
const canvas = await takeScreenshotCanvas()
return getJpegBlob(canvas)
}
async function takeScreenshotJpegBytes() {
const canvas = await takeScreenshotCanvas()
return getJpegBytes(canvas)
}
function blobToCanvas(blob, maxWidth, maxHeight) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = function () {
const canvas = document.createElement('canvas')
const scale = Math.min(
1,
maxWidth ? maxWidth / img.width : 1,
maxHeight ? maxHeight / img.height : 1,
)
canvas.width = img.width * scale
canvas.height = img.height * scale
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height)
resolve(canvas)
}
img.onerror = () => {
reject(new Error('Error load blob to Image'))
}
img.src = URL.createObjectURL(blob)
})
}
演示：
document.body.onclick = async () => {
// take the screenshot
var screenshotJpegBlob = await takeScreenshotJpegBlob()
// show preview with max size 300 x 300 px
var previewCanvas = await blobToCanvas(screenshotJpegBlob, 300, 300)
previewCanvas.style.position = 'fixed'
document.body.appendChild(previewCanvas)
// send it to the server
var formdata = new FormData()
formdata.append("screenshot", screenshotJpegBlob)
await fetch('https://your-web-site.com/', {
method: 'POST',
body: formdata,
'Content-Type' : "multipart/form-data",
})
}
// and click on the page
下面是一个使用示例：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文档。
其它你可能感兴趣的问题