留神视频必须播放能力截取到视频帧作为封面,能够监听播放进度来截取封面。不播放截取进去是黑屏,你能够监听 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,
};
};