SnailDev.GifMaker 一個生成gif並添加自定義字幕的工具 client 微信小程式 server nodejs + express 歡迎 star&fork 如果您有好的commit 也可以pull request Introduction 參考於sorry, 由@xtyxtyx編寫 ...
SnailDev.GifMaker
一個生成gif並添加自定義字幕的工具
client 微信小程式
server nodejs + express
歡迎 star&fork 如果您有好的commit 也可以pull request
體驗Demo sorry.web
Introduction
參考於sorry, 由@xtyxtyx編寫
但本工具並不使用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.
