5

Is there an easy way to figure out approximately how long a .gif image takes to play one time in Javascript?

skaffman
  • 390,936
  • 96
  • 800
  • 764
j00b
  • 405
  • 1
  • 5
  • 12
  • In what programming language/platform/environment? – Matt Ball Mar 21 '12 at 20:48
  • Not very concerned about the environment as I don't really need the value programmatically I just need to determine the approximate time the gif needs to take to play once in milliseconds. However, I am implementing the number I would get back from this in javascript. – j00b Mar 21 '12 at 20:52
  • If you're not concerned about doing this programmatically, then this question is off-topic. – Matt Ball Mar 21 '12 at 20:53
  • I actually just need to get the value of this for one gif in some way/shape/form regardless of how I get it. If there is an application that will tell me this already I could use that, if not I could use Javascript to do this. Either way works for me. Thanks for the help so far! – j00b Mar 21 '12 at 21:03

4 Answers4

4

The identify command from ImageMagick can give this information:

$ identify -verbose file.gif | grep 'Elapsed time'

  Elapsed time: 0:01.080
  Elapsed time: 0:01.150
  Elapsed time: 0:01.230

...

  Elapsed time: 0:04.250
  Elapsed time: 0:04.330
  Elapsed time: 0:04.399
  Elapsed time: 0:04.480

The last line printed should be the total length of the animation.

Martin Vilcans
  • 5,118
  • 5
  • 21
  • 17
  • 1
    Running it three times gives Elapsed time: 0:02.780, Elapsed time: 0:02.840 and Elapsed time: 0:02.810. – Prinzhorn Apr 11 '16 at 16:48
2

The accepted answer doesn't give the exact result. Elapsed time is like a real world clock while ImageMagick runs the animation. What you want is the Delay field for each frame and sum them up.

$ identify -verbose fail.gif  | grep Delay

Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 15x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 10x100
Delay: 33x100
Delay: 10x100
Delay: 10x100
Delay: 10x100

Where 33x100 is a delay of 330ms.

Edited by Mark Setchell

You can actually extract the delay parameter somewhat more surgically (than by using grep) with the %T escape:

enter image description here

identify -format "%T\n" animation.gif 

8
8
8
8
8
8
8
8
8
8
11
11
11
11
11
11
11
26

And get the total with awk like this:

identify -format "%T\n" anomation.gif | awk '{t+=$0} END{print t " centiseconds"}'
183 centiseconds
Mark Setchell
  • 169,892
  • 24
  • 238
  • 370
Prinzhorn
  • 21,577
  • 6
  • 58
  • 64
1

I tried ImageMagick identify but it didn't give me the correct duration.

I found another reliable way using ExifTool

exiftool -Duration image.gif

It will print out the duration in seconds:

Duration : 0.48 s

AboulEinein
  • 1,071
  • 3
  • 13
  • 26
1

You can pass gif file to following function, which will return duration value

isGifAnimated(file) {
    return new Promise((resolve, reject) => {
      try {
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = (event) => {
          let arr = new Uint8Array(<ArrayBuffer>fileReader.result);
          let duration = 0;
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] == 0x21
              && arr[i + 1] == 0xF9
              && arr[i + 2] == 0x04
              && arr[i + 7] == 0x00) {
              const delay = (arr[i + 5] << 8) | (arr[i + 4] & 0xFF)
              duration += delay < 2 ? 10 : delay;
            }
          }
          resolve(duration / 100);
        }

      } catch (e) {
        reject(e);
      }
    });
  }
Irawati
  • 11
  • 1