Gif user uploads movable exploded into a plurality of image frames, and generates a new merged image gif

background

Why make such a tool

First, the company recently made a package of expression product, you need to generate text gif picture, and you can control the position of the text, and different text displayed on different pictures
Made into a web client tool, anytime, anywhere, easy to use

First you need to GIF picture framing, discovered this by looking library buzzfeed / libgif-js
To generate text can be edited freely on into the picture and found this library fabric.js
To preview or download a new generation of GIF images, use this library yahoo / gifshot

The main idea is to achieve

The movable FIG gif gif through repository resolved into instances gif
Gif instance canvas traversing acquired for each frame, is converted into the baseURL, a sub-file object store up
The baseURL converted to the display interface through fabric, and realize the writing operation of any functions

gitHub address detailed usage and notes refer to the README

Picture Address Please enter https format
After decomposition image, drag the scroll bar to view all the pictures around
Decomposition gif image link feature does not support cross-domain functionality, if you find the picture filled not address the problem, but the solution is to load pictures found out, F12 to enter the debugging stage look at the pictures mostly cross-domain error, the solution is to download pictures out , then use the upload function input
I am entirely in the Google browser developed, without consideration of any compatibility issues, please visit the Google test
Because the code Experience deployed on github page, so open feel some Caton, To quickly open, resolve the problem on their own vpn
Picture framing of pictures and generates a fixed width of 300px, post can add dynamic size
Click on the picture after generation, can generate images to download it, please note that you want to use as copyright issues, such as copyright disputes arise, the library is not responsible
If you have other questions, please leave a message below

Writing is not easy, if you have help, please move gitHub address to the stars star✨✨ thank you