I wrote a tool based on node, which can make "sorry, do whatever you want" GIF (open source) online

Keywords: Javascript

SnailDev.GifMaker

A tool for generating gif and adding custom subtitles

client wechat applet

server nodejs + express

Welcome star&fork If you have a good commit pull request

Introduction

Refer to sorry , written by @ xtyxtyx

However, this tool does not use aegisub to create subtitles for template videos. Instead, it uses filter drawtext in FFmpeg. In addition, the author will continue to learn more about FFmpeg and strive to realize creation automation as soon as possible.

The following scenarios can be generated:

Open interface:

1. Get category

GET https://gifmaker.develophelper.com/gif/category

 

2. make gif

POST https://gifmaker.develophelper.com/gif/make
Content-Type: application/x-www-form-urlencoded
Body: tplid=1&                         // Template ID
        quality=1&                       // Image quality (temporarily invalid)                
        content=Good##$@?$?@$##Even if you're a top engineer##$@?$?@$##Even if your report is perfect##$@?$?@$##I told you to change the report. You're going to change it##$@?$?@$##After all, I'm a customer##$@?$?@$##Great customer##$@?$?@$##sorry The customer is really amazing##$@?$?@$##I'll ask him to change his report every day##$@?$?@$##Change every day  //Subtitle content (separated by ා $@? $? @ $ා)

 

3. Return results

{
"m": 0,      // code 0 successful
"d":{        // d data
    "gifurl": "http://gifmaker.develophelper.com/cache/1_1a322f1b7dd9633e5433d0e0152e18a6a924cb23.gif"
},
"e": ""      // e errMsg
}

 

Structure

├─client                    // Client reference wechat applet structure
│
└─server                    // Server side
   │
   ├─data                   // Template configuration directory
   │
   ├─public                 // Static resource directory
   │  │
   │  ├─cache               // Dynamically generated gif directory
   │  │
   │  └─demo                // Sample directory
   │
   ├─test                   // Test directory
   │
   ├─app.js                 // Main program entry
   │
   ├─gifmaker.js            // gif creation
   │
   ├─util.js                // Tool class
   │
   └─test                   // Test directory

DependOn

server

"ffmpeg-static": "^2.2.0",
"fluent-ffmpeg": "^2.1.2"

How to Use

  1. Make a video template and put it in the data/template / directory
  2. Add configuration to data/category.js and data/template.js
  3. Put the completed demo under public/demo/gif / and put the thumbnail under public/demo/thumbnail /

Interpretation

{
    filter: "drawtext",                     // filter type 
    options: {
        "text": "I'm starving",                // Text content
        "x": "(w-text_w)/2",                // Abscissa of text
        "y": "h-text_h-4",                  // Ordinate of text occurrence
        "enable": "between(t,0,1.04)",      // Time range of text occurrence
        'fontfile': 'msyhbd.ttc',           // Font file
        'fontcolor': 'white',               // Font color
        "fontsize": "14"                    // font size
    }
}

More references FFmpeg Filters Documentation

License

The MIT License (MIT). Please see LICENSE for more information.

Posted by kiss-o-matic on Thu, 02 Apr 2020 08:58:53 -0700