Arrêter l'animation GIF de manière programmatique

Question

Je développe une application Twitter qui fait référence aux images directement depuis Twitter. Comment empêcher la lecture de gifs animés ?

Utiliser window.stop() à la fin de la page ne fonctionne pas pour moi dans Firefox.

Y a-t-il un meilleur hack JavaScript ? De préférence, cela devrait fonctionner pour tous les navigateurs

Answer 1

Inspiré par la réponse de @ Karussell, j'ai écrit Gifffer. Découvrez-le ici https://github.com/krasimir/gifffer

Il ajoute automatiquement le contrôle stop/play en haut de votre Gif.

Answer 2

Ce n'est pas une solution de navigateur croisé, mais cela a fonctionné dans firefox et opera (pas dans ie8 :-/). Tiré d'ici

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

function is_gif_image(i) {
    return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}

Answer 3

Afin d'améliorer la réponse de Karussell, cette version doit être cross-browser, gèle toutes les images, y compris celles qui ont une fin de fichier incorrecte (par exemple, les pages de chargement d'image automatisées), et n'entre pas en conflit avec la fonction de l'image originale, permettant à l'original d'être cliqué avec le bouton droit comme s'il se déplaçait.

Je le ferais détecter l'animation mais c'est beaucoup plus intensif que de simplement les congeler malgré tout.

function createElement(type, callback) {
    var element = document.createElement(type);

    callback(element);

    return element;
}

function freezeGif(img) {
    var width = img.width,
    height = img.height,
    canvas = createElement('canvas', function(clone) {
        clone.width = width;
        clone.height = height;
    }),
    attr,
    i = 0;

    var freeze = function() {
        canvas.getContext('2d').drawImage(img, 0, 0, width, height);

        for (i = 0; i < img.attributes.length; i++) {
            attr = img.attributes[i];

            if (attr.name !== '"') { // test for invalid attributes
                canvas.setAttribute(attr.name, attr.value);
            }
        }

        canvas.style.position = 'absolute';

        img.parentNode.insertBefore(canvas, img);
        img.style.opacity = 0;
    };

    if (img.complete) {
        freeze();
    } else {
        img.addEventListener('load', freeze, true);
    }
}

function freezeAllGifs() {
    return new Array().slice.apply(document.images).map(freezeGif);
}

freezeAllGifs();

Answer 4

C'est un peu un hack, mais vous pouvez essayer de charger le gif dans une iframe et appeler window.stop() depuis l'intérieur de l'iframe (sur lui-même) une fois que l'image a été chargée. Cela empêche le reste de la page de s'arrêter.

Answer 5

Pourrait essayer ceci...

var img = document.getElementById('animatedgif');
setInterval(function() { img.src = img.src; }, 1);

Vous pourriez probablement inclure une valeur d'intervalle de ~15 ms sans voir d'animation pour la plupart des gifs. Fonctionne dans Chrome au moins...