uniapp 获取视频第一帧 当作图片

在uniapp中，可以使用uni-app官方提供的uni.media.chooseVideo API选择本地视频文件，并通过video标签播放视频。同时，我们可以通过video标签提供的canvas截取视频的第一帧作为图片。

具体实现步骤如下：

1. 使用uni.media.chooseVideo API选择本地视频文件，并通过video标签播放视频。

uni.media.chooseVideo({
  sourceType: ['album'],
  success: function(res) {
    var videoPath = res.tempFilePath;
    // 将视频路径绑定到video标签
    uni.createVideoContext('myVideo').src = videoPath;
  }
})

2. 在video标签的loadedmetadata事件中获取视频时长、宽高等信息，并将视频的第一帧渲染到canvas上。

<template>
  <view>
    <video id="myVideo" :bindloadedmetadata="onLoadedMetadata"></video>
    <canvas id="myCanvas"></canvas>
  </view>
</template>

<script>
export default {
  methods: {
    onLoadedMetadata(e) {
      // 获取视频时长、宽高
      const duration = e.duration;
      const width = e.videoWidth;
      const height = e.videoHeight;
      // 将canvas的宽高设置为视频的宽高
      const canvas = uni.createCanvasContext('myCanvas');
      canvas.canvas.width = width;
      canvas.canvas.height = height;
      // 绘制视频的第一帧到canvas上
      canvas.drawImage('myVideo', 0, 0, width, height);
      canvas.draw();
      // 将canvas转换为图片
      const that = this;
      setTimeout(function() {
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: function(res) {
            const imagePath = res.tempFilePath;
            // 将图片路径保存到data中
            that.imagePath = imagePath;
          }
        })
      }, 1000)
    }
  }
}
</script>

在上述代码中，我们通过video标签的loadedmetadata事件获取视频的宽高等信息，并将canvas的宽高设置为视频的宽高。接着，我们通过canvas的drawImage方法绘制视频的第一帧到canvas上，并将canvas转换为图片，最后将图片路径保存到data中。

需要注意的是，由于canvas绘图是异步的，我们需要在setTimeout中等待一定时间，确保canvas已经绘制完成。同时，为了避免视频播放过程中截取到不正确的图片，我们可以在视频播放前暂停视频，并在canvas绘制完成后再播放视频。