Cómo saber si un gif es animado con Javascript

Si has tuiteado alguna vez un GIF animado, te habrás dado cuenta de que Twitter lo coge y lo convierte a mp4. Yo especulo que hacen dicha conversión, ya que un MP4 está mejor soportado en todas las plataformas, por lo menos en cuanto a que se permite la reproducción/pausa de la animación. Y también porque con un video se puede evitar un bucle infinito, a diferencia de con un GIF animado. Entonces, ¿cómo podemos determinar si un GIF está animado o sin embargo es un GIF estático? En este artículo os muestro algunas soluciones con las que salir de dudas de una vez por todas.

Línea de comando con ImageMagick

ImageMagick, la increíble librería para la manipulación de imágenes, proporciona un método para contar los frames de un GIF concreto:

./ImageMagick-6.9.0/bin/identify -format %n wtf.gif

El comando anterior te proporcionará un recuento de los frames dentro del GIF. Ya sabes, si hay más de un frame es que el GIF es animado.

animated-gif-detector

Para esos que prefieren Javascript, me encontré con una librería muy simple para detectar GIFs animados en NPM: animated-gif-detector. Su API no podría ser más corta:

var fs = require('fs');
var animated = require('animated-gif-detector');

> animated(fs.readFileSync('wtf.gif'));
// true

> animated(fs.readFileSync('blank.gif'));
// false

La llamada a la función simplemente devuelve un true o un false, lo que indica si el GIF está animado o no. Exactamente lo que estábamos buscando, ¿verdad? En cuanto a lo que podemos desprender de la librería, he visto algo de código que no me ha gustado mucho y que no voy a entrar a describir. De todas maneras, si deseas determinar si un GIF es animado, sin embargo, es tan fácil como lo que hemos hecho antes. Con una simple línea de código podemos dictaminar si un GIF está formado por varios frames o simplemente es una imagen estática.

Y este ha sido el tutorial sobre cómo detectar si un GIF es animado en Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP