node制作一個視頻幀長圖生成器操作分享

更新時間：2022年08月02日 10:06:02 作者：JYeontu

這篇文章主要介紹了node制作一個視頻幀長圖生成器操作分享，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下

前言

平時我們在發(fā)布視頻的時候通常都需要從視頻中截取一幀圖片作為視頻的封面，而現(xiàn)在常見的封面動態(tài)預(yù)覽效果則可以通過視頻幀長圖來輔助實現(xiàn)，今天就讓我們一起使用node來制作一個視頻幀長圖生成工具。

效果展示

如上圖，這是從一個3分鐘左右的視頻中截取出來的30幀截圖合成的長圖。

工具實現(xiàn)

獲取視頻時長

1、引入依賴我們可以使用get-video-duration這個庫中的getVideoDurationInSeconds這個方法來獲取視頻的時長。

const { getVideoDurationInSeconds } = require('get-video-duration');

2、獲取時長 getVideoDurationInSeconds是一個異步獲取圖片時長的方法，入?yún)樾枰@取時長的視頻路徑，返回的結(jié)果為視頻的時長秒數(shù)。

getVideoDurationInSeconds(videoPath);

控制臺交互獲取相關(guān)參數(shù)

如上圖，我們可以在控制臺選擇相關(guān)的參數(shù)，這里需要的參數(shù)主要有2個，分別是視頻路徑和截取圖片數(shù)量。

這里使用了我自己基于inquirer封裝的一個控制臺文件選擇器插件，具體實現(xiàn)過程和使用方法可以查看我的這一篇文章：node封裝一個控制臺進度條插件詳情

計算截取圖片的時間點集合

根據(jù)獲取到的時長和輸入的截圖數(shù)量，我們可以計算出截取圖片的時間點集合。

const changTimeFormat = (seconds)=>{
    seconds = parseInt(seconds);
    let h = Math.floor(seconds / 3600);
    h = h > 9 ? h : '0' + h;
    seconds %= 3600;
    let m = Math.floor(seconds / 60);
    m = m > 9 ? m : '0' + m;
    seconds %= 60;
    seconds = seconds > 9 ? seconds : '0' + seconds;
    return h + ':' + m + ':' + seconds;
};
const countSplitPoint = (duration,cutNums = 30) => {
    cutNums = Math.min(cutNums,parseInt(duration));
    const step = Math.floor(duration / cutNums);
    let start = 0;
    const res = [];
    while(cutNums--){
        res.push(changTimeFormat(start));
        start += step;
    }
    return res;
};

獲取每一個時間點的視頻幀截圖

1、引入依賴

const cp = require('child_process');
const ffmpeg = require('ffmpeg');

引入child_process后，我們可以在node中執(zhí)行shell腳本語句。
ffmpeg為比較常用的視頻處理工具庫。

2、功能實現(xiàn)

遞歸截取視頻各個時間點的截圖幀。

const execJpg = async(videoPath , saveFilePath, timeArr, index, cb )=>{
    let ind = (index + 1) + '';
    while(ind.length < (timeArr.length + '').length){
        ind = '0' + ind;
    }
    const str = `ffmpeg -ss ${timeArr[index]} -i ${videoPath} -y -f image2 -t 0.001 ${saveFilePath + '\\' + ind}.jpg`;
    await cp.exec(str,async(err)=>{
        if(err) console.log(err);
        const progressBar = new ProgressBar({
            duration: timeArr.length - 1,
            tip:{
                0:'圖片截取中……',
                100:'圖片截取完成！'
            }
        });
        progressBar.run(index);
        if(index < timeArr.length - 1){
            await execJpg(videoPath , saveFilePath, timeArr, index + 1, cb )
        }else{
            console.log('開始合并圖片')
            cb();
        }
    })
};
const getVideoFrame = (config,cb)=>{
    getVideoDurationInSeconds(config.videoPath).then(async(res)=>{
        const timeArr = countSplitPoint(res,config.cutNums);
        await execJpg(config.videoPath , config.saveFilePath, timeArr, 0, cb );
    });
};

圖片拼接長圖

這里使用了我前面封裝的一個圖片拼接庫來進行處理，該庫的實現(xiàn)過程及使用方法可以查看我的這一篇文章：node實現(xiàn)封裝一個圖片拼接插件

let jInquirer = new JInquirer(config);
jInquirer.prompt().then(async(res)=>{
    res.saveFilePath = '.\\img';
    const ImgConcatClass = new ImgConcat();
    getVideoFrame(res,()=>{
        const p = {
            folderPath:'.\\img',        //資源目錄
            targetFolder:'.\\longImg',  //合并后圖片存放目錄
            direction:'y'               //拼接方向，y為橫向，n為縱向
        }
        ImgConcatClass.concatAll(p).then(ans=>{
            console.log(ans);
            return ans;
        });
    });
});

到此這篇關(guān)于node制作一個視頻幀長圖生成器操作分享的文章就介紹到這了,更多相關(guān)node制作生成器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: