如何使用JavaScript截取视频的第一帧?

20 min read

可以使用HTML5的标签和标签实现截取视频的第一帧,以下是一种实现方式:

function captureFirstFrame(videoSrc, canvasId) {
  const video = document.createElement("video");
  video.src = videoSrc;
  video.crossOrigin = "anonymous";
  
  video.addEventListener("loadeddata", () => {
    const canvas = document.getElementById(canvasId);
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    const ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    const imageUrl = canvas.toDataURL();
    
    // Do something with the captured image URL...
  });

  video.load();
}

使用方法如下:

<video id="myVideo" src="myVideo.mp4" controls></video>
<canvas id="myCanvas"></canvas>

<script>
  captureFirstFrame("myVideo.mp4", "myCanvas");
</script>

这个函数接收两个参数:视频地址和画布元素的ID。它创建了一个标签,加载视频,等待视频数据加载完成后,它将视频的第一帧画在一个标签中,然后将画布转换为图像URL,最后你可以对这个URL进行你想要的操作。