Press "Enter" to skip to content

Creare GIF animate con JavaScript

Nelle web application di oggi è sempre più frequente l’elaborazione di file multimediali anche UGC. Instagram docet. Grazie ad un’ottima libreria open source, rilasciata con licenza MIT, è possibile creare GIF animate con poche righe di JavaScript. La libreria in questione si chiama GIF.js.

Dopo aver incluso la libreria creiamo l’istanza:

var gif = new GIF({
   workers: 2,
   quality: 10
});

Aggiungiamo gli elementi immagine che diventeranno i frame della nostra GIF:

var img = document.getElementById('image1');
gif.addFrame(img);
 
var img2 = document.getElementById('image2');
gif.addFrame(img2);
 
var img3 = document.getElementById('image3');
gif.addFrame(img3);

Adesso possiamo finalizzare la GIF animata:

gif.on('finished', function(blob) {
   window.open(URL.createObjectURL(blob));
});
 
gif.render();

Qui potete visionare la demo.

Happy coding!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.