读取视频关键帧图片

南宫玄色2023-08-05 9:04

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

html 复制代码

<!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>