在Chrome 控制台 使用JS对用户选择视频进行截图

16 min read
// 获取视频元素
var video = document.querySelector("video");

// 创建画布元素
var canvas = document.createElement("canvas");

// 设置画布的宽度和高度为视频的宽度和高度
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

// 获取画布的绘图上下文
var context = canvas.getContext("2d");

// 将视频的当前帧绘制到画布上
context.drawImage(video, 0, 0, canvas.width, canvas.height);

// 获取画布的数据 URL
var dataURL = canvas.toDataURL();

// 创建图片元素
var image = document.createElement("img");

// 设置图片的源为画布的数据 URL
image.src = dataURL;

// 将图片添加到文档中
document.body.appendChild(image);