h5 canvas截取视频第一帧

canvas截取视频第一帧。
注意video存在preload，否则真机会截取透明图，截不到。
重置canvas用 this.ctx.fillRect(0, 0, width,height);
canvas写入缩放视频或图片太麻烦，直接用图片代替原本的写入。

image.png

1 结构布局 vue示列。

<div>
// 视频播放
   <video
                  ref="video"
                    preload="auto" 
                  @loadeddata="vSetImg(this)"
                  id="video"
                  x-webkit-airplay="allow"
                  autoplaypreload="auto"
                  :src="videoSrc"
                  controls
                ></video>
// 展示用canvas
 <div  id="imgbox" class="canvas border-progress">
        <canvas id="canvas" className="my-canvas"></canvas>
       // 到时图片就来这了
      </div>
</div>

2 js部分

mounted() {
  // 不重要参考上一篇 画外面绿框的
  this.initBorderProgress()
},
methods:{
// video播放时自动触发这个
vSetImg() {
            this.captureImage();
 },
 captureImage() {
            setTimeout(() => {
              const output = document.getElementById("imgbox");
              const video = document.getElementById("video");
              // 算canvas px的不需要直接去掉--根据rem的fontsize算
              const imgbox = parseFloat(
                document.querySelector("html").style.fontSize
              );
              const canvas = document.createElement("canvas");
              canvas.width = imgbox * 4-10;
              canvas.height = imgbox * 5-10;
              const img = new Image();
              canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
              const dataUrl = canvas.toDataURL('image/png')
              img.src = dataUrl
              this.ctximg=dataUrl
              // alert(dataUrl)
              output.appendChild(img)
              // this.initBorderProgress()
              this.ctx.fillRect(0, 0,  this.ctx.canSetWidth,this.ctx.canSetHeight);
              this.startProgress(
              this.ctx,
              this.ctx.canSetWidth-this.ctx.borderWidth,
              this.ctx.canSetHeight-this.ctx.borderWidth,
              this.ctx.borderWidth
            );
            }, 100);
          },
...
initBorderProgress() {},
startProgress(){},
...


}

ps:
https://www.jianshu.com/p/e05fcceebfb5
其余参考：
https://blog.csdn.net/single15/article/details/80453279