node制作一个视频帧长图生成器操作分享

 更新时间:2022年08月02日 10:06:02   作者:JYeontu  
这篇文章主要介绍了node制作一个视频帧长图生成器操作分享,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下

前言

平时我们在发布视频的时候通常都需要从视频中截取一帧图片作为视频的封面,而现在常见的封面动态预览效果则可以通过视频帧长图来辅助实现,今天就让我们一起使用node来制作一个视频帧长图生成工具。

效果展示

如上图,这是从一个3分钟左右的视频中截取出来的30帧截图合成的长图。

工具实现

获取视频时长

  • 1、引入依赖 我们可以使用get-video-duration这个库中的getVideoDurationInSeconds这个方法来获取视频的时长。
const { getVideoDurationInSeconds } = require('get-video-duration');
  • 2、获取时长 getVideoDurationInSeconds是一个异步获取图片时长的方法,入参为需要获取时长的视频路径,返回的结果为视频的时长秒数。
getVideoDurationInSeconds(videoPath);

控制台交互获取相关参数

如上图,我们可以在控制台选择相关的参数,这里需要的参数主要有2个,分别是视频路径和截取图片数量。

这里使用了我自己基于inquirer封装的一个控制台文件选择器插件,具体实现过程和使用方法可以查看我的这一篇文章:node封装一个控制台进度条插件详情

计算截取图片的时间点集合

根据获取到的时长和输入的截图数量,我们可以计算出截取图片的时间点集合。

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中执行shell脚本语句。
ffmpeg为比较常用的视频处理工具库。

2、功能实现

递归截取视频各个时间点的截图帧。

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 );
    });
};

图片拼接长图

这里使用了我前面封装的一个图片拼接库来进行处理,该库的实现过程及使用方法可以查看我的这一篇文章:node实现封装一个图片拼接插件

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;
        });
    });
}); 

到此这篇关于node制作一个视频帧长图生成器操作分享的文章就介绍到这了,更多相关node制作生成器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Node.js 日志处理模块log4js

    Node.js 日志处理模块log4js

    今天和大家分享一下NodeJS中写日志的一个常用第三方包:Log4js.下面我们就来详细探讨下吧
    2016-08-08
  • Node.js使用Streams来处理文件读写操作的示例代码

    Node.js使用Streams来处理文件读写操作的示例代码

    在Node.js中,Streams 提供了一种高效的方式来处理文件的读写操作,特别是对于大文件或数据流,Streams 允许你以流的方式读写数据,这意味着数据可以分块处理,本文介绍了在Node.js中如何使用Streams来处理文件读写操作,需要的朋友可以参考下
    2024-09-09
  • 在Node.js中判断路径是否绝对的解决方法

    在Node.js中判断路径是否绝对的解决方法

    在不同的操作系统中,路径的表示方式有很大的差异,当编写跨平台的 Node.js 应用时,正确判断路径的绝对性变得至关重要,本文提供了path-is-absolute模块的详细使用指南,它是一个兼容 Node.js 早期版本且适用于所有操作系统的解决方案,需要的朋友可以参考下
    2024-04-04
  • Nginx设置为Node.js的前端服务器方法总结

    Nginx设置为Node.js的前端服务器方法总结

    在本篇文章中小编给大家分享了关于Nginx设置为Node.js的前端服务器的方法和实例,需要的朋友们学习下。
    2019-03-03
  • node.js对于数据库MySQL基本操作实例总结【增删改查】

    node.js对于数据库MySQL基本操作实例总结【增删改查】

    这篇文章主要介绍了node.js对于数据库MySQL基本操作,结合实例形式总结分析了node.js针对mysql数据库基本配置、连接与增删改查相关操作技巧,需要的朋友可以参考下
    2023-04-04
  • Linux 安装nodejs环境及路径配置详细步骤

    Linux 安装nodejs环境及路径配置详细步骤

    大家都知道linux安装nodejs有两种比较常用的方法,一种解压即可用的方法操作比较简便,另一种方法通过编译来安装,本文重点给大家讲解第一种方法,感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • express中static中间件的具体使用方法

    express中static中间件的具体使用方法

    这篇文章主要介绍了express中static中间件的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • ChatGPT编程秀之最小元素的设计示例详解

    ChatGPT编程秀之最小元素的设计示例详解

    这篇文章主要为大家介绍了ChatGPT编程秀之最小元素的设计示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Windows7系统下如何安装nodejs16以上版本

    Windows7系统下如何安装nodejs16以上版本

    这篇文章主要给大家介绍了关于Windows7系统下如何安装nodejs16以上版本的相关资料,很多时候node.js的版本存在兼容,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 使用Node.js搭建Vue项目的详细步骤

    使用Node.js搭建Vue项目的详细步骤

    Vue.js 是一款流行的 JavaScript 框架,而 Node.js 提供了一个强大的运行环境,两者的结合使得开发者可以轻松构建现代化的前端项目,本文将介绍如何使用 Node.js 搭建一个基本的 Vue 项目,需要的朋友可以参考下
    2023-12-12

最新评论