生成 GIF 并添加自定义字幕的工具 SnailDev.GifMaker

MIT
JavaScript
跨平台
2018-03-30
SnailDev

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

  1. 制作视频模板 放到 data/template/ 目录下

  2. 给 data/category.js 和 data/template.js 添加相关配置

  3. 将做好的 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.

加载中

评论(1)

SnailDev
SnailDev 软件作者
66666

暂无资讯

暂无问答

如何制作gif动态图

  是不是被搞笑的gif动态弄得是哈哈大笑,是不是特别羡慕那些会制作搞笑gif动态图片的人呢,不用羡慕,做这东西真的很简单,下面小编就来教大家如何利用迅捷GIF制作工具制作这些搞怪的gif...

2018/08/08 17:33
5
0
如何制作表情包动态图,gif制作工具哪个好

  看着网上飞天盖地的表情包动态图,我一直在想,他们是如何制作的,其实制作这个表情包非常简单,下面小编就来教大家如何利用迅捷gif制作工具制作。   GIF制作软件http://www.xunjiesh...

2018/08/10 17:37
5
0
如何制作动态图片,QQ动图表情包如何制作

  我们经常看到QQ聊天时朋友用的各式的gif表情包,非常的好玩,那么他们是怎么制作这些表情包动态图的呢,其实还是比较简单的,下面小编我就来告诉大家如何使用迅捷gif制作工具制作这些表情...

2018/08/15 18:42
1
0
gif动态图如何制作

  怎么做自己喜欢的动态图呢,其实很简单,小编就做过好些动态图下面就利用迅捷gif制作工具教大家如何制作教。   使用工具   GIF制作工具http://www.xunjieshipin.com/download-gifmak...

2018/08/10 17:33
0
0
电脑上怎么将视频转换成gif动图

  我们常常在QQ、微信上看到各色各样的gif表情包,我们都会想这么一个问题,它们是怎么制作的呢,其实制作gif动图并不难,有一款gif制作软件就能制作,比如说是迅捷gif制作工具就非常的不错...

2018/08/23 16:42
0
0
如何制作动态图片,QQ动图表情包如何制作

  我们经常看到QQ聊天时朋友用的各式的gif表情包,非常的好玩,那么他们是怎么制作这些表情包动态图的呢,其实还是比较简单的,下面小编我就来告诉大家如何使用迅捷gif制作工具制作这些表情...

2018/08/13 17:03
1
0
掌握Java设计模式之中介设计模式(16)

1、概念 中介者模式是用来降低多个对象和类之间的通信复杂性,提供了一个中介类,例如QQ游戏平台、QQ群、短信平台和房产中介、以及火币网或者基金平台。不论是QQ游戏还是QQ群,它们都是充当一...

2018/04/26 10:35
25
1
如何制作gif动态图片,QQ动态表情包如何制作

  在QQ聊天时,我们经常会使用一些gif动态图片来烘托聊天气氛,那么这些gif是如何制作的了呢,其实制作这些表情包是很简单,下面小编就来给大家分享下迅捷gif制作工具制作QQ动态表情包的方...

2018/08/16 18:03
5
0
怎么给gif图片加文字

 有时候发现一两张搞笑的动态图片,觉得能在gif图片上加些文字就更完美了,那么怎么样给gif图片加文字呢,其实很简单,下面小编就来教大家如何利用迅捷GIF制作工具制作。   迅捷GIF制作工...

2018/08/23 18:12
4
0
gif动图怎么制作

  平时想必大家都很是羡慕那些会制作gif动态图片的人吧,其实没什么可羡慕的,因为制作起来就特别的简单,下面小编就来教大家如何利用迅捷gif制作工具制作gif动态图片。   GIF制作工具h...

2018/08/08 16:59
2
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部