使用JavaScript将视频所有帧保存至项目文件夹

问题 #

当前仅能通过点击播放/暂停按钮保存单帧，且每次保存会覆盖之前的帧；需求是将视频的全部帧保存到项目文件夹，同时完成自动命名。

解决方案 #

修改后的HTML代码 #

<html>
 <head>
<title>批量导出视频帧</title>
</head>
<body>
    视频
    <br />
    <video id="my_video" controls>
        <source src="./assets/vine.mp4" type="video/mp4" />
    </video>
    <br />
    <button id="export_frames">导出所有帧</button>
    <br />
    <canvas id="thecanvas" style="display: none;"></canvas>
    <br />
    <script type='text/javascript' src="./js/main.js"></script>
</body>
</html>

修改后的JS代码 #

window.onload = function () {
  var video = document.getElementById("my_video");
  var thecanvas = document.getElementById("thecanvas");
  var exportBtn = document.getElementById("export_frames");

  // 视频元数据加载完成后，设置canvas与视频同尺寸
  video.addEventListener('loadedmetadata', function() {
    thecanvas.width = video.videoWidth;
    thecanvas.height = video.videoHeight;
  });

  // 绑定导出按钮点击事件
  exportBtn.addEventListener('click', function() {
    exportAllFrames(video, thecanvas);
  });
};

function exportAllFrames(video, canvas) {
  const context = canvas.getContext("2d");
  const fps = 30; // 可根据视频实际帧率调整
  const frameInterval = 1000 / fps;
  const totalFrames = Math.floor(video.duration * fps);
  let currentFrame = 0;

  function exportFrame() {
    if (currentFrame > totalFrames) {
      alert("所有帧导出完成");
      return;
    }

    // 跳转到当前帧对应的时间点
    video.currentTime = currentFrame / fps;

    // 等待视频渲染当前帧后绘制并导出
    setTimeout(() => {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = `video_frame_${currentFrame + 1}.png`;
      link.href = dataURL;
      link.click();

      currentFrame++;
      exportFrame();
    }, 100);
  }

  exportFrame();
}

关键改动说明 #

• HTML部分：新增导出按钮，隐藏canvas（仅用作帧绘制容器），修正JS文件引用路径。
• JS部分：
  • 监听视频元数据加载事件，保证canvas尺寸与原视频一致，导出帧无拉伸变形。
  • 实现批量导出逻辑：按帧率计算总帧数，逐帧跳转视频时间点，将帧绘制到canvas后生成带序号的下载链接，自动触发下载。
  • 命名格式为video_frame_1.png、video_frame_2.png……避免文件覆盖。

注意事项 #

• 浏览器可能会拦截批量下载，需提前允许当前网站的下载权限。
• 若已知视频实际帧率，可将fps变量替换为video.videoTracks[0].frameRate（部分浏览器支持该API），提升帧导出的准确性。
• 处理长视频时会占用较多浏览器资源，建议分段处理或使用性能更强的设备。

内容的提问来源于stack exchange，提问作者Dev Topia