基於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

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.