读取视频关键帧图片
思路，用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>