Vue+Video.js实现视频抽帧返回抽帧图片Base64

我不是程序猿吖

已于 2024-01-16 10:21:28 修改

阅读量739

点赞数 9

文章标签： javascript vue.js 音视频

于 2024-01-15 16:40:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60457220/article/details/135605274

版权

1.vue

   // 抽帧 (url视频地址 time00:00:00:00时分秒帧 FPS视频帧率) 返回抽帧图片Base64
    getImgBase64(url,time,FPS) {
          var base64URL = ''
          let video = document.createElement('video')
          video.setAttribute('crossOrigin', 'anonymous') //处理跨域
          video.setAttribute('src', url)
          video.currentTime = this.timeToSeconds(time,FPS);
          video.addEventListener('loadeddata', function() {
          let canvas = document.createElement('canvas')
          //使用视频的宽高作为canvas、预览图的宽高
          let width = video.videoWidth 
          let height = video.videoHeight
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(video, 0, 0, width, height) //绘制canvas
          base64URL = canvas.toDataURL('image/jpeg') //转换为base64，图片格式默认为png，这里修改为jpeg
          // cons