用原生js和html5进行网页截图,如何使用html5拍摄网页的屏幕截图，而不通过JS将其呈现在画布上...

这比看起来简单。可以使用此答案中的代码来实现将视频的静态快照保存为png的缺失部分。完整的代码如下：

const v = document.getElementById("v");

const b = document.getElementById("b");

const i = document.getElementById("i");

navigator.mediaDevices.getDisplayMedia({

audio: false

}).then((r) => {

console.log(r);

v.srcObject = r;

}).catch((e) => {

console.log("this must be run in a secure context. Stack snippets (rightfully) refuse to run this.");

});

b.onclick = () => {

// take screenshot

// from https://stackoverflow.com/a/44325898/15472

let scale = 1;

const canvas = document.createElement("canvas");

canvas.width = v.clientWidth * scale;

canvas.height = v.clientHeight * scale;

canvas.getContext('2d').drawImage(v, 0, 0,

canvas.width, canvas.height);

i.src = canvas.toDataURL();

// you can send i.src here to a server

// stop video

let tracks = v.srcObject.getTracks();

tracks.forEach(track => track.stop());

v.srcObject = null;

}

#v,

#i {

width: 400;

height: 300;

}

#v {

border: 1px solid blue;

}

#i {

border: 1px solid green;

}

take screenshot

请注意，StackOverflow不允许询问屏幕抓取权限，因此此代码不在此处运行。