关于javascript: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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。