基于node写了个工具,可以在线制作“sorry,为所欲为”的 GIF(开源)
SnailDev.GifMaker
一个生成gif并添加自定义字幕的工具
client 微信小程序
server nodejs + express
欢迎 star&fork 如果您有好的commit 也可以pull request
体验Demo sorry.web
Introduction
本工具并不使用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
}
Structure
├─client // 客户端参考微信小程序结构
│
└─server // 服务端
│
├─data // 模板配置目录
│
├─public // 静态资源目录
│ │
│ ├─cache // 动态生成的gif目录
│ │
│ └─demo // 示例目录
│
├─test // 测试目录
│
├─app.js // 主程序入口
│
├─gifmaker.js // gif创建
│
├─util.js // 工具类
│
└─test // 测试目录
DependOn
server
"ffmpeg-static": "^2.2.0",
"fluent-ffmpeg": "^2.1.2"
How to Use
- 制作视频模板 放到 data/template/ 目录下
- 给data/category.js 和data/template.js 添加相关配置
- 将做好的demo放到 public/demo/gif/下 缩略图放到 public/demo/thumbnail/下
Interpretation
{
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
License
The MIT License (MIT). Please see LICENSE for more information.
基于node写了个工具,可以在线制作“sorry,为所欲为”的 GIF(开源)的更多相关文章
- n8n 基于node 的流程自动化工具
n8n 是基于node开发的流程自动化工具,提供了可视化的操作,我们可以用来集成不同的服务. 目前已经提供了很多的服务集成组件,同时我们也可以方便的自己扩展,后边会进行一个系统的 学习,同时介绍下使用 ...
- 基于Node.js的爬虫工具 – Node Crawler
Node Crawler的目标是成为最好的node.js爬虫工具,目前已经停止维护. 我们来抓取光合新知博客tech栏目中的文章信息.访问http://dev.guanghe.tv/category/ ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
- 基于node实现一个简单的脚手架工具(node控制台交互项目)
实现控制台输入输出 实现文件读写操作 全原生实现一个简单的脚手架工具 实现vue-cli2源码 一.实现控制台输入输出 关于控制台的输入输出依然是基于node进程管理对象process,在proces ...
- 基于node和npm的命令行工具——tive-cli
前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...
- 飞鱼(FlyFish)——便捷的原型在线制作工具
关于项目原型制作,小菜先前写过一篇文章<FastUI快速界面原型制作工具>,只不过那个是用C#写的原型制作工具,但是感觉用C#写起来比较费力,而且也不太好用,经过高人指点,茅塞顿开,决定重 ...
- Gulp:基于流的自动化构建工具
前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...
- 《基于Node.js实现简易聊天室系列之详细设计》
一个完整的项目基本分为三个部分:前端.后台和数据库.依照软件工程的理论知识,应该依次按照以下几个步骤:需求分析.概要设计.详细设计.编码.测试等.由于缺乏相关知识的储备,导致这个Demo系列的文章层次 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
随机推荐
- 基于am3358的lcd输出
/*#include<stdio.h> */ #include <unistd.h> #include <stdio.h> #include <stdlib. ...
- 如何在BIOS中设置RAID?
随着价格的下降和相应主板的支持,目前SATA硬盘已经逐渐成为主流.但由于受芯片组和操作系统的影响,不少用户对SATA硬盘的使用及安装系统掌握不足,今天小编就给大家介绍一下SATA硬盘的日常应用技巧,希 ...
- TypeError: Error #1034: 强制转换类型失败:无法将 "" 转换为 Array。
1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 "" 转换为 Array. at mx.charts.series::LineSeries/ ...
- 7.C++类与封装的概念
类通常分为以下两部分 -类的内部具体实现 -类的外部使用方法 比如: 用户使用手机,只需要知道如何使用. 而手机开发者,则需要考虑手机内部的实现细节. 类的封装 并不是类的每个成员变量和成员函数都要对 ...
- boost asio allocation
allocation演示了自定义异步操作的内存分配策略,因为asio在执行异步IO操作时会使用系统函数来动态分配内存,使用完后便立即释放掉:在IO操作密集的应用中,这种内存动态分配策略会较大地影响程序 ...
- 在visual studio 2017中配置Qt
简述 这两天因为软件工程课要用vs2017写一个C++的GUI界面,就打算学习Qt,但是vs2017配置起Qt来不像vs2013,15那么简单,而且现在网上对于vs2017配置Qt的教程很少,也不详细 ...
- luoguP2711 小行星
题目描述 星云中有n颗行星,每颗行星的位置是(x,y,z).每次可以消除一个面(即x,y或z坐标相等)的行星,但是由于时间有限,求消除这些行星的最少次数. 输入输出格式 输入格式: 第1行为小行星个数 ...
- [BZOJ1385] [Baltic2000] Division expression (数学)
Description 除法表达式有如下的形式: X1/X2/X3.../Xk 其中Xi是正整数且Xi<=1000000000(1<=i<=k,K<=10000) 除法表达式应 ...
- java把集合数据写入txt文档
List<String> list= bs.findJson(); try { BufferedWriter bw = new BufferedWriter(new FileWriter( ...
- ssm实现分页查询
ssm整合实现分页查询 一.通过limit查询语句实现分页,并展示 1.mapper.xml配置 <select id="selectUsersByPage" paramet ...