js 截取视频第一帧转成File图片格式

1.电脑系统 win11专业版
2.开发环境 vue2+element
3.在开发的过程中,我们会遇到截取视频第一帧转换成图片的需求,下面我来分享一下方法:

// 上传视频的时候调用对应的方法
videoRef.oncanplay = () => {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext('2d');
    canvas.width = videoRef.clientWidth; // 获取视频宽度
    canvas.height = videoRef.clientHeight; // 获取视频高度
    // 利用canvas对象方法绘图
    ctx.drawImage(videoRef, 0, 0, videoRef.clientWidth, videoRef.clientHeight);
    // 转换成base64形式
    const imgBase64 = canvas.toDataURL("image/png");
    const fileName = resultFileName + ".png";
    console.log(dataURLtoFile(imgBase64,fileName));
    
    //生成对应的file文件
    const fileData = dataURLtoFile(imgBase64,fileName);
}

export const dataURLtoFile = (dataurl, fileName) => {
    let binary = atob(dataurl.split(",")[1]);
    let mime = dataurl.split(",")[0].match(/:(.*);/)[1];
    let array = [];
    for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }

    let fileData = new Blob([new Uint8Array(array)],{
        type:mime
    });

    return new File([fileData],fileName,{type:mime});
}

99.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。