- 当前位置：首页 >IT科技 >Node + FFmpeg 实现Canvas动画导出视频
Node + FFmpeg 实现Canvas动画导出视频
发布时间：2025-11-05 13:33:03 来源：码上建站 作者：数据库
导言
Canvas为前端提供了动画展示的实现视频平台，随着现在视频娱乐的动画导出流行，你是实现视频否想过把Canvas动画导出视频?目前纯前端的视频编码转换(例如WebM Encoder Whammy)还存在许多限制，较为成熟的动画导出方案是将每帧图片传给后端实现，由后端调用FFmpeg进行视频转码。实现视频整体流程并不复杂，动画导出这篇文章将带大家实现这个过程。实现视频
整体方案
由前端记录Canvas动画的动画导出每帧图像，以base64字符串形式传给后端 利用node fluent-ffmpeg模块，实现视频调用FFmpeg将图片合并成视频，动画导出并将视频存储在server端，实现视频并返回相应下载url 前端通过请求得到视频文件前端部分
每帧图片生成
图片生成可以通过canvas原生接口toDataURL实现，动画导出最终返回base64形式的实现视频图像数据。
generatePng () { ... var imgData = canvas.toDataURL("image/png"); return imgData; }动画录制与图片流传输
动画的动画导出记录与传送是个异步过程，免费源码下载这里返回一个Promise，实现视频等待后端处理完毕，收到回应后，即完成此异步过程。
以下代码将canvas每帧动画信息存入一个图片数组imgs中，将数组转成字符串的形式传给后端。注意这里contentType设置为“text/plain”。
generateVideo () { var that = this; return new Promise ( function (resolve, reject) { var imgs = []; ... window.requestAnimationFrame(that.recordTick.bind(that, imgs, resolve, reject)); } ) } recordTick (imgs, resolve, reject) { ...//每帧动画的记录信息，如时间戳等 if (...) {//动画终止条件 this.stopPlay(); imgs.push(this.generatePng()); $.ajax({ url: /video/record, data: imgs.join( ), method: POST, contentType: text/plain, success: function (data, textStatus, jqXHR) { resolve(data); }, error: function (jqXHR, textStatus, errorThrown) { reject(errorThrown); } }); } else { ...//每帧动画展示的代码 imgs.push(this.generatePng()); window.requestAnimationFrame(this.recordTick.bind(this, imgs, resolve, reject)); } }视频下载
上一节代码中，动画停止时，会通过post请求给后端传送所有图片数据，后端处理完毕后，返回数据中包含一个url，此url即为视频文件的下载地址。
为了支持浏览器端用户点击下载，我们需要用到a标签的download属性，此属性可以支持点击a标签后下载指定文件。
editor.generateVideo().then(function (data) { videoRecordingModal.setDownloadLink(data.url, data.filename); videoRecordingModal.changeStatus(recorded); }); setDownloadLink: function (url, filename) { this.config.$dom.find(.video-download).attr(href, url); this.config.$dom.find(.video-download).attr(download, filename); }后端部分
图片序列生成
接收到前端传送的亿华云计算图片数据后，我们首先需要将图片解析、存储在服务器中，我们建立以当前时间戳命名的文件夹，将图片序列以一定格式存储于其中。由于每张图片写入都是异步过程，为确保所有图片都已处理完毕后，才执行视频转码过程，我们需要用到Promise.all。
Promise.all(imgs.map(function (value, index) { var img = decodeBase64Image(value) var data = img.data var type = img.type return new Promise(function (resolve, reject) { fs.writeFile(path.resolve(__dirname, (folder + /img + index + . + type)), data, base64, function(err) { if (err) { reject(err) } else { resolve() } }) }) })).then(function () { …//视频转码 })其中decodeBase64Image函数参考这里。
视频生成
视频生成利用FFmpeg转码工具。首先确保server端安装了FFmpeg
brew install ffmpeg在项目中安装fluent-ffmpeg，这是node调用ffmpeg的接口模块
npm install fluent-ffmpeg --save结合上一节图片序列存储的代码，整个接口代码如下：
app.post(/video/record, function(req, res) { var imgs = req.text.split( ) var timeStamp = Date.now() var folder = images/ + timeStamp if (!fs.existsSync(resolve(folder))){ fs.mkdirSync(resolve(folder)); } Promise.all(imgs.map(function (value, index) { var img = decodeBase64Image(value) var data = img.data var type = img.type return new Promise(function (resolve, reject) { fs.writeFile(path.resolve(__dirname, (folder + /img + index + . + type)), data, base64, function(err) { if (err) { reject(err) } else { resolve() } }) }) })).then(function () { var proc = new ffmpeg({ source: resolve(folder + /img%d.png), nolog: true }) .withFps(25) .on(end, function() { res.status(200) res.send({ url: /video/mpeg/ + timeStamp, filename: jianshi + timeStamp + .mpeg }) }) .on(error, function(err) { console.log(ERR: + err.message) }) .saveToFile(resolve(video/jianshi + timeStamp + .mpeg)) }) })视频下载
最终将视频文件传输给前端的接口代码如下：
app.get(/video/mpeg/:timeStamp, function(req, res) { res.contentType(mpeg); var rstream = fs.createReadStream(resolve(video/jianshi + req.params.timeStamp + .mpeg)); rstream.pipe(res, {end: true}); })效果预览
注：此功能是个人项目”简诗”的一部分，完整代码可以查看https://github.com/moyuer1992...
服务器租用- 以1060显卡建模（突破想象力边界，享受真实感十足的视觉盛宴）
- SQL Server分布式事务的6解决方案
- 容器安全扫描工具推荐
- SQL Server 2000sa密码忘记如何解决？
- Google最近发布了首批能在Chrome OS本地运行的安卓应用集，通过‘安卓运行时’扩展完成了该壮举。现在，一位开发者已经指明了将安卓应用带入桌面版Chrome的路。弗拉德·菲利波夫的chromeos-apk脚本和ARChon安卓运行时扩展手拉手一起开展工作，将安卓应用带进了Windows，Mac和Linux桌面上的Chrome中。运行在Ubuntu 14.04 LTS上的安卓应用：IMDB，Flipboard和Twitter通过‘安卓运行时’运行的应用的性能不是很令人惊异，任何想要运行Dead Trigger 2或者其它图形密集型游戏的雄心壮志可以放到一边了。同样地，要运行官方的‘安卓运行时’的非官方重构包，或者在Chrome OS之外运行的话，其系统完整性（如网络摄像头，扬声器等）可能不完整或者根本不可能。按照下面的指南一步步来，并不保证一定成功。它只能作为高度实验性进行，里面遍布漏洞，很不稳定——甚至白日见鬼。只能出于好奇而尝试，不要高度寄予厚望，这样你就不会深受其困扰。安卓应用转战Linux大法 要通过Chrome在Linux上运行安卓应用，很明显，你需要安装Chrome，要求的版本是37，或者更高。坦率地讲，假如你打算玩玩不稳定的Chrome版本，那么你也可以下载并为Linux安装。假如已经安装了Chrome的某个版本？你可以通过命令行来安装不稳定版，命令如下：sudo apt-get install google-chrome-unstable有了 Chrome 之后，你需要下载定制版的‘安卓运行时’扩展，而不是Google或Chronium提供的版本——由弗拉德·菲利波夫创建的‘安卓运行时’。这个版本和官方的有着诸多的不同，最突出的不同就是它可以运行在桌面版的浏览器上。从BitBucket下载ARChon v1.0下载好‘安卓运行时’扩展后，你需要从.zip解压内容，并移动解压后的文件夹到你的Home文件夹。要安装它，打开Google Chrome，点击汉堡式菜单按钮，然后导航到扩展页。检查‘启用开发者模式’并点击‘加载解包的扩展’按钮。‘安卓运行时’扩展本身不会做太多事情，所以你需要从安卓应用创建兼容包。要完成这项工作，你需要‘chromeos-apk’命令行Javascript工具，它可以从“Node 封装模块管理器（npm ）”安装。首先运行：sudo apt-get install npm nodejs nodejs-legacyUbuntu 64位用户？你还需要获取以下库：sudo apt-get install lib32stdc++6现在，运行npm命令来安装该脚本吧：npm install -g chromeos-apk根据你的配置，你可能需要过会儿使用sudo来运行。假如你不喜欢通过sudo安装npm模块，你可以试着骗过它。现在，搞定了。去Google找找你想要试试的应用的APK吧，请牢记不是所有的安卓应用都会工作，而那些可以工作的也未必工作得很好，或者缺少功能。把你想要的安卓APK放到~/Home，然后回到终端中使用以下命令来转换，你可以将APK命名成任何你想要的名字：chromeos-apk replaceme.apk --archon该命令将花一点时间来完成这项工作，也许也就是一眨眼的时间。实际上，不需要眨眼的时间现在，在你的Home文件夹内有个ARChon生成的Chrome APK extension-y folder-y这样的东西。所有剩下来要做的事，就是安装并查看它是否正常工作！回到chrome://extensions页面，再次轻敲‘加载解封装扩展’按钮，但这次选择上面脚本创建出来的文件夹。应用应该会正确安装，但是它确实会没有问题吗？打开Chrome应用启动器或应用页面并启动它来看看是否有问题。由于ARChon运行时支持不限数量的chrome化的APK，你可以反复进行该操作，你想做多少次都行。Chrome APK subreddit用于跟踪成功/失败情况，所以假如你感到很有用，一定要贴出你的结果。谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。
- 掌握DB2数据移动的简捷方法描述
- SQL Server 2005 安装与正确应用
- 全网连夜修复的Log4j漏洞，如何做到一行代码都不改？
- 神钢电脑主板拆解教程（一步步教你如何拆解神钢电脑主板，轻松解决常见故障）
- TeslaMate漏洞致数十辆特斯拉电动汽车可被远程访问
IT资讯网企商汇亿华云服务器租用益华科技IT技术网源码库香港云服务器源码下载益强数据堂极客码头益强智囊团益强编程堂编程之道云智核智能时代码上建站益华IT技术论坛思维库IT资讯网多维IT资讯亿华云益强前沿资讯亿华互联汇智坊极客编程亿华智慧云益华科技亿华灵动运维纵横亿华云计算益强智未来科技前瞻全栈开发亿华智造益强科技云站无忧创站工坊益强编程舍亿华科技益强科技益华科技
- Copyright © 2025 Powered by Node + FFmpeg 实现Canvas动画导出视频,码上建站 滇ICP备2023006006号-47sitemap