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

目录

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>
相关推荐
LuckySusu2 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu7 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在9 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu14 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate18 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖31 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate32 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰35 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice2 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git