web-dev-qa-db-fra.com

Arrêt de l'animation GIF par programme

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?

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

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

javascripthtmlanimated-gif
64
Karussell

Ce n'est pas une solution multi-navigateur mais cela a fonctionné dans Firefox et opera (pas dans ie8: - /). Pris à partir 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);
    }
}
48
Karussell

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

Il ajoute automatiquement le contrôle stop/play au-dessus de votre Gif.

56
Krasimir

Afin d'améliorer la réponse de Karussell, cette version devrait être multi-navigateur, gèle toutes les images, y compris celles qui ont une fin de fichier incorrecte (par exemple, les pages de chargement automatique d'images), et n'entre pas en conflit avec la fonction de l'image d'origine, ce qui permet la original pour être cliqué droit comme s'il bougeait.

Je le ferais détecter l'animation mais c'est beaucoup plus intensif que de simplement les figer 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();
8
Makaze

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

3
Jason