vue中获取视频的第一帧作为封面展示

由于我在项目中多次遇到需要使用该方法的情景，于是将其封装在了一个工具类文件中，方便多个地方调用。

import Vue from 'vue'
export function getVideoFirstFrame(url, file) {
  const video = document.createElement('video') // 创建video对象
  video.src = url // url地址
  const canvas = document.createElement('canvas') // 创建 canvas 对象
  const ctx = canvas.getContext('2d') // 绘制2d
  video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
  video.currentTime = 1 // 第一秒帧
  video.oncanplay = () => {
    canvas.width = 90
    canvas.height = 90
    // 利用canvas对象方法绘图
    ctx.drawImage(video, 0, 0, 90, 90)
    // 转换成base64形式
    Vue.set(file, 'imageShow', canvas.toDataURL('image/png')) // 获取视频第一帧作为imageShow展示
  }
}

在需要调用的文件中引入上面的工具类，调用方法并传入需要处理的视频链接跟对象即可