JavaScript implements frame by frame decomposition of GIF dynamic graph, and supports user-defined editing to generate gif


Experience address

  • Since the tool address is attached to GitHub page, the opening speed will be slower. Please wait patiently or solve the problem of GIT network speed by yourself


Why make such a tool

Recently, we are making a product of expression pack, which needs to generate text into GIF pictures, and can control the position of text display, and display different text on different pictures. We only need to provide coordinates to the back-end, but I want to generate pictures directly, and finally finish this function through continuous attempts


The main ideas are

  • Analysis of GIF moving graph through GIF library into GIF instance
  • Traverse to get the canvas of each frame of the GIF instance, convert it to the baseurl, and then transfer it to a file object to store it
  • Display the converted baseurl to the canvas interface through fabric, and add text to realize any text operation function
  • Generate a new GIF picture after each frame is synthesized

Using tutorials

Tools are divided into three areas from top to bottom

Canvas area

Display exploded pictures and added text in the canvas

Selection area

  1. Upload pictures directly upload the selected files in this computer
  2. Fill in the link input box and fill in an online GIF image address. If the image cannot be parsed, the solution is to download the image and then upload it using the upper part, because the image does not support cross domain
  3. The segmentation option divides the image parsed by GIF into several areas, which supports 2 3 4
  4. The display interval time of each frame in the preview or generated GIF, with the minimum value of 0.02, in S
  5. Picture size the size of the generated picture, default 300px, unit PX
  6. Preview picture is only for preview viewing, default width is 300px, high adaptive
  7. Generate pictures for download

Property operation area

  • Each square corresponds to the text attribute of each area in the canvas
  • The last square can control all text

Note: the text position should not deviate from the corresponding picture, otherwise the picture will disappear or the display will be incomplete

Property details

attribute Explain default
Frame number Number of pictures in each section Automatic calculation, or click the + – below to set
left Text distance left border distance 0
top margin Text distance from top border 0


  • I am debugging and developing in Google browser, without considering any compatibility issues. It is better to use it in Google browser
  • Click generate image to download the generated image. If you need to use it, please pay attention to the copyright issue. If there is a copyright dispute, this library will not be responsible for it
  • If you have any other questions, please leave a message below

Special thanks

  • Gif picture framing buzzfeed / libgif JS
  • Canvas operation fabric.js
  • Generate GIF image Yahoo / gifshot

It’s not easy to create. If it helps you, please move to GitHub address and give star star ✨ thank you

Recommended Today

How to share queues with hypertools 2.5

Share queue with swote To realize asynchronous IO between processes, the general idea is to use redis queue. Based on the development of swote, the queue can also be realized through high-performance shared memory table. Copy the code from the HTTP tutorial on swoole’s official website, and configure four worker processes to simulate multiple producers […]