一个生成 gif 并添加自定义字幕的工具。
client 微信小程序
server nodejs + express
欢迎 star&fork 如果您有好的commit 也可以 pull request
体验Demo sorry.web
本工具并不使用 aegisub 为模板视频创建字幕,采用的是 FFmpeg 中的 filter drawtext , 另,笔者还将继续深入了解 FFmpeg ,争取早日实现 创作自动化 。
可生成如下案列:
开放接口:
1.获取 category
GET https://gifmaker.develophelper.com/gif/category
2.制作 gif
POST https://gifmaker.develophelper.com/gif/make Content-Type: application/x-www-form-urlencoded Body: tplid=1 // 模板ID &quality=1 // 画质(暂时无效) &content=好啊##$@?$?@$##就算你是一流工程师##$@?$?@$##就算你出报告再完美##$@?$?@$##我叫你改报告你就要改##$@?$?@$##毕竟我是客户##$@?$?@$##客户了不起啊##$@?$?@$##sorry 客户真的了不起##$@?$?@$##以后叫他天天改报告##$@?$?@$##天天改 天天改 //字幕内容(以##$@?$?@$##作为分隔符)
3.返回结果
{ "m": 0, // code 0 successful "d":{ // d data "gifurl": "http://gifmaker.develophelper.com/cache/1_1a322f1b7dd9633e5433d0e0152e18a6a924cb23.gif" }, "e": "" // e errMsg }
├─client // 客户端参考微信小程序结构 │ └─server // 服务端 │ ├─data // 模板配置目录 │ ├─public // 静态资源目录 │ │ │ ├─cache // 动态生成的gif目录 │ │ │ └─demo // 示例目录 │ ├─test // 测试目录 │ ├─app.js // 主程序入口 │ ├─gifmaker.js // gif创建 │ ├─util.js // 工具类 │ └─test // 测试目录
server
"ffmpeg-static": "^2.2.0", "fluent-ffmpeg": "^2.1.2"
制作视频模板 放到 data/template/ 目录下
给 data/category.js 和 data/template.js 添加相关配置
将做好的 demo 放到 public/demo/gif/下 缩略图放到 public/demo/thumbnail/ 下
{ filter: "drawtext", // filter类型 options: { "text": "我就是饿死", // 文本内容 "x": "(w-text_w)/2", // 文本出现的横坐标 "y": "h-text_h-4", // 文本出现的纵坐标 "enable": "between(t,0,1.04)", // 文本出现的时间范围 'fontfile': 'msyhbd.ttc', // 字体文件 'fontcolor': 'white', // 字体颜色 "fontsize": "14" // 字体大小 } }
更多参考 FFmpeg Filters Documentation
The MIT License (MIT). Please see LICENSE for more information.