我正在使用 navigator.mediaDevices.getDisplayMedia 来获取屏幕截图,但它捕获了页面的唯一可见部分,但还有更多内容隐藏在滚动区域中并且被遗漏了。那么是否有可能捕获整页?
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')
}
async function takeScreenshotStream() {
const width = screen.width * (window.devicePixelRatio || 1)
const height = screen.height * (window.devicePixelRatio || 1)
const errors = [];
let stream;
const mediaStreamConstraints = {
audio: false,
video: {
width,
height,
frameRate: 1,
},
};
try {
stream = await getDisplayMedia(mediaStreamConstraints)
} 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()
const video = document.createElement('video')
const result = await new Promise((resolve, reject) => {
video.onloadedmetadata = () => {
video.play()
video.pause()
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d')
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
}
document.body.onclick = async () => {
const canvas = await takeScreenshotCanvas()
document.getElementById("screenshot-preview").src = canvas.toDataURL();
}
我尝试使用 Html2Canvas 和 dom-to-image 来截取整页截图,但它们有自己的回退,就像他们不捕获 iframe、SVG 等一样。
任何帮助将不胜感激。