01
OCT

Gifshot: Générez des GIFs en Javascript depuis des images et vidéos

Publié le 01/10/14 à 07h52 par DJo

Gifshot est une bibliothèque Javascript permettant de générer des GIFs animés à partir d'images, d'une source vidéo ou encore depuis des streams médias.

Gifshot est une bibliothèque Javascript permettant de générer des GIFs animés à partir d'images, d'une source vidéo ou encore depuis des streams médias.

Depuis des années, les GIFs animés ont la cotte sur Internet, et il faut l'avouer, ils peuvent s'avérer très utiles dans certaines situations.

Créée par la team Yahoo Sport lors d'un hackathon, GifShot vous permettra de générer côté front (en JS) un GIF animé optimisé à partir de plusieurs sources au choix:

 

Générer un GIF animé depuis votre webcam

Le mode de base de la bibliothèque, voici le code à mettre en place:

gifshot.createGIF(function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

Pour gérer la webcam, l'API webRTC getUserMedia() est utilisée pour manipuler la caméra de l'utilisateur et lui demander les droits...

 

Générer un GIF animé depuis une vidéo

Vous pouvez aussi créer votre GIF à partir d'une vidéo en ligne:

gifshot.createGIF({
    'video': ['example.mp4', 'example.ogv']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

Cette fois-ci l'élément HTML5 video est utilisé pour streamer la vidéo et du canvas est utilisé pour créer des images dynamiques des vidéos.

 

Générer un GIF animé à partir de plusieurs images

Passez en argument vos différentes images et vous obtiendrez un GIF animé:

gifshot.createGIF({
    'images': ['http://i.imgur.com/2OO33vX.jpg', 'http://i.imgur.com/qOwVaSN.png', 'http://i.imgur.com/Vo5mFZJ.gif']
},function(obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

 

Bien sûr, le script vous propose tout un tas d'options pour générer le GIF le plus adapté à vos besoins:

// Desired width of the image
'gifWidth': 200,
// Desired height of the image
'gifHeight': 200,
// You can pass an existing video element to use for the webcam GIF creation process,
// and this video element will not be hidden (useful when used with the keepCameraOn option)
// Pro tip: Set the height and width of the video element to the same values as your future GIF
// Another Pro Tip: If you use this option, the video will not be paused, the object url not revoked, and
// the video will not be removed from the DOM.  You will need to handle this yourself.
'webcamVideoElement': null,
// Whether or not you would like the user's camera to stay on after the GIF is created
// Note: The cameraStream Media object is passed back to you in the createGIF() callback function
'keepCameraOn': false,
// Expects a cameraStream Media object
// Note: Passing an existing camera stream will allow you to create another GIF and/or snapshot without
//  asking for the user's permission to access the camera again if you are not using SSL
'cameraStream': null,
// The amount of time (in seconds) to wait between each frame capture of a video
'interval': 0.1,
// The number of frames to use to create the animated GIF
// Note: Each frame is captured every 100 milleseconds of a video
'numFrames': 10,
// The text that covers the animated GIF
'text': '',
// The font weight of the text that covers the animated GIF
'fontWeight': 'normal',
// The font size of the text that covers the animated GIF
'fontSize': '16px',
// The minimum font size of the text that covers the animated GIF
// Note: This option is only applied if the text being applied is cut off
'minFontSize': '10px',
// Whether or not the animated GIF text will be resized to fit within the GIF container
'resizeFont': false,
// The font family of the text that covers the animated GIF
'fontFamily': 'sans-serif',
// The font color of the text that covers the animated GIF
'fontColor': '#ffffff',
// The horizontal text alignment of the text that covers the animated GIF
'textAlign': 'center',
// The vertical text alignment of the text that covers the animated GIF
'textBaseline': 'bottom',
// The X (horizontal) Coordinate of the text that covers the animated GIF (only use this if the default textAlign and textBaseline options don't work for you)
'textXCoordinate': null,
// The Y (vertical) Coordinate of the text that covers the animated GIF (only use this if the default textAlign and textBaseline options don't work for you)
'textYCoordinate': null,
// Callback function that provides the current progress of the current image
'progressCallback': function(captureProgress) {},
// Callback function that is called when the current image is completed
'completeCallback': function() {},
// how many pixels to skip when creating the palette. Default is 10. Less is better, but slower.
// Note: By adjusting the sample interval, you can either produce extremely high-quality images slowly, or produce good images in reasonable times.
// With a sampleInterval of 1, the entire image is used in the learning phase, while with an interval of 10,
// a pseudo-random subset of 1/10 of the pixels are used in the learning phase. A sampling factor of 10 gives a
// substantial speed-up, with a small quality penalty.
'sampleInterval': 10,
// how many web workers to use to process the animated GIF frames. Default is 2.
'numWorkers': 2,
// Whether or not you would like to save all of the canvas image binary data from your created GIF
// Note: This is particularly useful for when you want to re-use a GIF to add text to later
'saveRenderingContexts': false,
// Expects an array of canvas image data
// Note: If you set the saveRenderingContexts option to true, then you get the savedRenderingContexts
//  in the createGIF callback function
'savedRenderingContexts': []

Côté compatibilité, il faudra oublier Internet Explorer 9 et moins, le script fonctionne dès Internet Explorer 10 (sauf la version Webcam).

Pour ne pas ralentir le chargement de vos pages, le script utilise des Webworkers pour générer les GIFs en parallèle du chargement des éléments d'interface. Un algo détermine le nombre de couleurs à utiliser pour générer un GIF optimisé en poids.

Vous n'avez plus qu'à en trouver un usage !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web