关于javascript:js-截取视频第一帧转成File图片格式

87次阅读

共计 917 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完