今天说说h5端上，视频截图功能通过Canvas实现。
代码
直接从代码分析
前期准备
<!DOCTYPE html>
<html>
<head>
<title>screenshot</title>
<meta charset="UTF-8" />
</head>
<body>
<video autoplay loop controls id="video"></video>
<canvas id="screenshot"></canvas>
<input type="file" accept="video/*" id="videoFile" />
<div style="text-align: center;">
<button id="screenshot-btn">screenshot</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
const video = document.getElementById("video");
const videoFile = document.getElementById("videoFile");
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(reader.result);
};
reader.onerror = function (error) {
reject(error);
};
});
};
videoFile.addEventListener("change", (event) => {
console.log("select video...");
getBase64(event.target.files[0]).then((result) => {
console.log("successful...");
video.setAttribute("src", result);
});
});
首先我们需要创建一个video和一个input。我们对input进行监听，当选择视频后，我们将获取到的File转换为Base64，最后填充到video的src中去。
开始截图
const canvas = document.getElementById("screenshot");
const screenshot = document.getElementById("screenshot-btn");
screenshot.addEventListener("click", () => {
const ctx = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
console.log(canvas.toDataURL("image/png"));
});
接着，我们对screenshot按钮监听点击事件，我们从video中获取到视频的长度和宽度，并设置到canvas中。最后，我们只需要调用drawImage方法,将video填入，并x轴为0，y轴为0，长度宽度为canvas的长度宽度（即video的videoWidth和videoHeight）
完整代码Live Demo
问题
在使用过程我们可能采用远程视频资源，可能会遇到跨域的问题。可以参考启用CORS图片进行解决。
总结
h5端视频截图功能结合canvas还是很简单的，canvas也还有更多有趣的特性值得我们开发。