Create usable images for each Frame of an Animated GIF image using PHP

Question

Goal

As part of the functionality of a bigger app I am building I need to allow my user to take an Animated GIF image and extract each Frame into it's own image to show the user.

The user can then select any of the Frame images which will then be saved and used as a non-animated cover image on my Animated GIF Player which functions similar to a movie by loading the cover image on page load and only downloading and showing the large file Animated GIF image after the user has clicked a Play button on the cover image.

My goal is to do this with PHP as my app will be released as a WordPress plugin so if I require some fancy server side software then it could limit my userbase.

So far the best PHP search results for this task have netted this library called GifFrameExtractor which is a single file PHP Class. I found a more advanced/updated version in this Forked copy here https://github.com/AbhasKr/GifFrameExtractor

The library has 1 option. Generate Transparent frame or not. I have made a demo below which takes my sample Animated GIF image and extracts each Frame into its own Image file using both versions (transparent and not).

---

Problem

Neither of the 2 sets of images generated with the GifFrameExtractor library meet my quality needs.

I then found an online cloud image processing service which I uploaded the sample GIF image to and it generates perfect Frame images like I need!

The service is http://cloudinary.com/

I can view each Frame of my animated GIF file that I uploaded here using this format of URL

http://res.cloudinary.com/apollo-web-studio/image/upload/pg_[FRAME_NUMBER_HERE]/Ladda-loader-buttons_qlpxbc.jpg

Replace the [FRAME_NUMBER_HERE] part with the Frame Number and it will show the Frame as an image.

---

Demos

Demo and Code URLs

Demo http://apollowebstudio.com/labs/gif_gen/demo.php

GitHub GIST Demo Source Code: https://gist.github.com/jasondavis/ab7c71fc1a007c3a31282bb9791cecff

Forked GifFrameExtractor PHP Library used: https://github.com/AbhasKr/GifFrameExtractor

Source Test Animated GIF Image: http://localhost/labs/php/GifFrameExtractor/Ladda-loader-buttons.gif

The demo shows 3 different processing results from my attempt to take an Animated GIF image and extract each Frame into a usable image using PHP

Columns 1 and 2
Using the PHP library GIFFrameExtractor which the results are both not perfect.

column 3
I used an online image processing cloud service called cloudinary.com

The images generated on Cloudinary.com use some different technique as each frame generated is flawless!

My goal is to generate images for each frame and have them turn out like the results from Cloudinary.com using PHP. I need help please?

http://apollowebstudio.com/labs/gif_gen/demo.php

Answer 1

You may want to look at ImageMagick (which provides a PHP library) and specifically the "coalesce" functionality which produces a full-frame image out of each frame of a GIF animation (as opposed to only a partial frame content indicating changes from previous frame).

This can be used to generate a "film-strip" of an animated GIF, or in your case extract a separate complete image for each frame of the animated GIF.

Link here: http://www.imagemagick.org/Usage/anim_basics/#coalesce