js 将video的第一帧 转为图片

是通过video和canvas两个html5的标签实现的
首先在缓存创建这两个标签

let canvas = document.createElement('canvas')
let video = document.createElement('video')

然后就是video标签要让他播放并且要静音

// 自动播放
video.setAttribute("autoplay",'autoplay')
// 静音
video.setAttribute("muted",'muted')
// 为了保险 我再加个volume = 0  volume就是音量
video.volume = 0

其次就是如果你的视频播放地址有跨域问题
出现Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这个问题 就加上这个

video.setAttribute("crossOrigin",'anonymous')

以上是video的配置
之后就是在video的loadeddata事件式进行canvas的各种操作
loadeddata是在 当前帧的数据已加载 因为咱一开始就进行 就是第一帧了

video.addEventListener('loadeddata',() => {
	// 设置画布大小 根基自己需求定 
	canvas.width=500;
	canvas.height=250;
	// 渲染一个2d画布
    let ctx=canvas.getContext('2d');
    // 画出内容 因为此时video是第一帧 画出来的内容就是第一帧的图片
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 通过canvas的toDataURL将当前画布换成base64的图片
    let img = canvas.toDataURL('image/png') 
    // 清除一下画布
    ctx.clearRect(0,0,canvas.width,canvas.height);
})

这样就得到了 第一帧的内容

完整代码 我这个是 循环视频数组 循环制作图片的

videoMakeImg(videoList,newList){
      let canvas = document.createElement('canvas')
      canvas.width=100;
      canvas.height=65;
      let video = document.createElement('video')
      // 自动播放
	  video.setAttribute("autoplay",'autoplay')
	  // 静音
	  video.setAttribute("muted",'muted')
	  // 为了保险 我再加个volume = 0  volume就是音量
	  video.volume = 0
      video.setAttribute("crossOrigin",'anonymous')
      for (let i = 0; i < videoList.length; i++){
        video.src = videoList[i]
        video.addEventListener('loadeddata',() => {
          // 画布渲染
          let ctx=canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          // 生成图片 base64编码
          let base64 = canvas.toDataURL('image/png') 
          newList[i].imgUrl = base64
          ctx.clearRect(0,0,canvas.width,canvas.height);
          // 视频结束播放
          video.pause()
          // console.log('video111',video)
          // 通过this.$set让其在页面能够动态接收到
      }
    },