读取视频关键帧图片

思路，用video播放视频到某一秒，之后用canvas把video画成一张图片，从而在客户端得到视频关键帧图片，实现还有一些细节处理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style></style></head><body><input class="input" type="file" /><div class="list"></div></body><script>function captureKeyFrame(file, time = 0) {return new Promise((resolve) => {const url = URL.createObjectURL(file);const video = document.createElement("video");video.width = 150;video.height = 200;video.src = url;video.currentTime = time;video.muted = true;video.autoplay = true;video.oncanplay = async function () {const frame = await drawVideo(video);resolve(frame);};});}/*** @description: 用canvas把video画成一张图片* @param {*} video* @return {*}{ blob: "", url: ""} blob时上传的资源，url是本地资源地址*/function drawVideo(video) {return new Promise((resolve) => {const canvas = document.createElement("canvas");canvas.width = video.width;canvas.height = video.height;const ctx = canvas.getContext("2d");ctx.drawImage(video, 0, 0, canvas.width, canvas.height);canvas.toBlob((blob) => {resolve({blob,url: URL.createObjectURL(blob),});});});}</script><script>const input = document.querySelector(".input");const list = document.querySelector(".list");input.onchange = async function (event) {// 清空上一文件的关键帧图片list.innerHTML = "";const file = event.target.files[0];for (let i = 0; i < 10; i++) {const frame = await captureKeyFrame(file, i * 1);createPreview(frame);}};const createPreview = function (frame) {const img = new Image();img.src = frame.url;list.appendChild(img);};</script>
</html>