关于javascript:js截取video视屏画面帧

留神视频必须播放能力截取到视频帧作为封面，能够监听播放进度来截取封面。不播放截取进去是黑屏，你能够监听vedio的timeupdate事件在事件处理中去实现截图。另外留神讲vedio标签的crossOrigin属性设置为”anonymous”，避免跨域无奈截取

/**
 *@desc: base64转blob
 *@param {WindowBase64} dataURI base64
 *@return {Blob}
 */
export const dataURItoBlob = (dataURI: string) => {
  const byteString = atob(dataURI.split(',')[1]);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: 'image/png' });
};

/**
 *@desc: blob 转文 件对象
 *@param {Blob} newBlob blob格式文件
 *@param {String} fileName 文件名
 *@param {String} fileType 文件类型
 *@return {File}
 */
export const blobToFile = (
  newBlob: Blob,
  fileName: string,
  fileType: string = 'image/png',
) => {
  return new File([newBlob], fileName, {
    type: fileType,
    lastModified: Date.now(),
  });
};

/**
 *@desc: base64 转 file
 *@param {String} src 图片base64
 *@param {String} fileName 文件名
 *@return {void}
 */
export const dataURIToFile = (src: string, fileName: string) => {
  const blob = dataURItoBlob(src);
  const file = blobToFile(blob, fileName);
  return file;
};

/**
 *@desc: 截取video画面帧 返回截取的图片（File文件对象格局以及base64格局） (试验后果必须在视频播放之后截取胜利才有保障)
 *@param {HTMLVideoElement} video video标签节点
 *@param {String} fileName 文件名
 *@param {string} imageType 图片格式
 *@return {Object<{ file: File, src: WindowBase64 }>} res={file, src} 后果对象file是图片文件对象格局 src base64图片格式
 */
export const captureVideoPoster = (
  video: HTMLVideoElement,
  fileName: string,
  imageType = 'image/png',
) => {
  if (!video) return;
  const width = video.videoWidth;
  const height = video.videoHeight;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(video, 0, 0, width, height);
  const src = canvas.toDataURL(imageType);
  const file = dataURIToFile(src, fileName);
  return {
    src,
    file,
  };
};