canvas 截取视频首帧作为封面

主要模拟上传视频的同时截取视频首帧作为视频的封面

正常有如下控件上传文件

 <input type="file" accept=".mp4,.3gp" onchange="fileChangeEvent(this)" />

function fileChange(e){ 
    const fileOrg=e.files[0]; // 获取到了数据源对象
}
/* vue或angular等可以直接获取一个event，
 * 行内是写的@change="fileChange($event)"
 * 方法内获取文件源对象的是e.target.files[0]
 */

 通过这个源对象文件我们来实现截取首帧图片，主要利用canvas的drawImage方法，该方法可以从图片、视频或canvas上作图截取。

/*视频文件源获取图片封面
 *源文件、截取的宽、高
 */
function toGetTitleImg(org,cWidth,cHeight) {
    let dataURL = '';
    const reader = new FileReader(); // 创建读取文件对象
    reader.readAsDataURL(org); // 发起异步请求，读取文件
    reader.onload = (t: any) => {
      const video = document.createElement('video');
      // video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
      video.setAttribute('src', t.target.result);
      video.setAttribute('width', cWidth);
      video.setAttribute('height', cHeight);
      video.setAttribute('preload', 'auto');
      video.addEventListener('loadeddata', () => {
        const canvas = document.createElement('canvas');       
        canvas.width = cWidth;
        canvas.height = cHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, cWidth, cHeight); // 绘制canvas
        dataURL = canvas.toDataURL('image/jpeg'); // 转换为base64
        // this.base64toFile(dataURL)
      });
    };
  }  

拿到的是base64文件，我们去上传，一般需要file对象

有需要可以拿下面的base64toFile方法

function base64toFile(base) { // 将base64转换为文件
  // return new Promise((resolve, reject) => {
    const arr = base.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    const endValue=new File([u8arr], new Date().toISOString() + '.png', { type: mime });
    // resolve(endValue);
    return endValue;
  // });
}