Creare GIF animate con JavaScript

Pubblicato il 18 Marzo 2019

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!

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: