用canvas截取视频第一帧图片作为封面图

用canvas截取视频第一帧图片作为封面图_第1张图片

fileList.forEach((item) => {
        console.log(item.raw.type, 'item.raw.type')
        if (item.raw.type === 'video/mp4') {
          // item.url = require('../../../assets/images/video.png')
          let dataURL = ''
          const video = document.createElement('video')
          video.currentTime = 1 // 指定帧数
          video.setAttribute('crossOrigin', 'anonymous') // 处理跨域
          video.setAttribute('src', item.url)
          video.setAttribute('width', 150)
          video.setAttribute('height', 150)
          video.addEventListener('loadeddata', function () {
            const canvas = document.createElement('canvas')
            const width = video.width // canvas的尺寸和图片一样
            const height = video.height
            canvas.width = width
            canvas.height = height
            canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
            dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
          })
        }
      })

dataURL就是视频的第一帧图片,为base64格式

你可能感兴趣的:(javascript,css3,前端)