现在很多视频网站的播放器没有截图功能,这里提供几行截图脚本,需要的网友可以试试。实现原理很简单,就是获取video元素,然后绘制到canvas元素并获取图片数据,之后下载下来。所以,这个脚本只能用于H5视频播放器,其它类型播放器无法使用。
// 这是保存图片的函数。它模拟点击链接,打开保存窗口
function download(href, name) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = href;
save_link.download = name;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
// 获取页面的video元素
var v = document.querySelector('video');
// 创建canvas元素并绘制video元素内容
var c = document.createElement('canvas');
c.width = v.videoWidth;
c.height = v.videoHeight;
c.getContext('2d').drawImage(v, 0, 0, c.width, c.height);
// 绘制后,获取图片数据并下载
c.toBlob(function(b) {
var u = URL.createObjectURL(b);
download(u, '1.png');
URL.revokeObjectURL(u);
});
百度网盘和B站的播放页面都试过,可以成功截图。不知道如何运行脚本的网友,可以在浏览器内按下F12,打开调试窗口,并在控制台粘帖上面脚本,最后按下Enter运行。