前端开发攻略---从视频文件中提取画面帧

目录

1、实现思路

2、代码


1、实现思路

1、创建一个video元素 把视频放入video元素中,让它跳到指定的时间点

2、把这个时间点的画面画到canvas上

3、利用canvas提供的方法将图片转换为url和blob (url用来在页面上展示,blob用来上传至服务器)

2、代码

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>
      img {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <input type="file" name="" id="" />
    <script>
      const input = document.querySelector('input')
      input.onchange = async e => {
        // 获取文件
        const file = e.target.files[0]

        // 截取帧
        const result = await captureFrame(file, 2)
        console.log(result)

        // 展示到页面上
        const img = document.createElement('img')
        img.src = result.url
        document.body.appendChild(img)
      }

      // videoFile:视频文件  time:指定时间
      function captureFrame(videoFile, time = 0) {
        return new Promise((resolve, reject) => {
          const video = document.createElement('video')
          // 把二进制的数据文件转换成一个本地播放的地址
          video.src = URL.createObjectURL(videoFile)
          // 让视频跳转到指定时间
          video.currentTime = time
          // 进行自动播放
          video.autoplay = true
          // 由于浏览器的规则,自动播放可能会失败,需要调成静音播放
          video.muted = true
          // 等视频完全加载完再捕获帧
          video.onloadeddata = () => {
            // 确保视频已经加载完数据,稍微延迟一下再捕获帧
            setTimeout(() => {
              // 获取到当前时间点的画面
              const cvs = document.createElement('canvas')
              cvs.width = video.videoWidth
              cvs.height = video.videoHeight
              const ctx = cvs.getContext('2d')
              ctx.drawImage(video, 0, 0, cvs.width, cvs.height)
              // 这里是异步的,需要用promise包裹起来
              cvs.toBlob(blob => {
                // blob是二进制数据,但是不能直接使用,需要转换为url
                const url = URL.createObjectURL(blob)
                resolve({
                  blob,
                  url,
                })
              })
            }, 10)
          }
        })
      }
    </script>
  </body>
</html>
相关推荐
艾莉丝努力练剑10 分钟前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
倔强青铜34 小时前
苦练Python第18天:Python异常处理锦囊
开发语言·python
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
u_topian5 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
珊瑚里的鱼5 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法