javascript - Detener la animación GIF mediante programación

html animated-gif

Question

Estoy desarrollando una aplicación de Twitter que hace referencia a las imágenes directamente desde Twitter. ¿Cómo puedo evitar que se reproduzcan los gifs animados?

Usar window.stop() al final de la página no funciona para mí en Firefox.

¿Hay un mejor hack de JavaScript? Preferible, esto debería funcionar para todos los navegadores

Answer 1

En un intento de mejorar la respuesta de Karussell, esta versión debe ser de navegador cruzado, congela todas las imágenes, incluidas las que tienen un final de archivo incorrecto (por ejemplo, páginas de carga de imágenes automatizadas), y no entra en conflicto con la función de la imagen original, permitiendo original para hacer clic con el botón derecho como si se estuviera moviendo.

Haría que detectara la animación, pero eso es mucho más intenso que simplemente congelarlos independientemente.

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 2

Esta no es una solución de navegador cruzado, pero esto funcionó en Firefox y Opera (no en ie8: - /). Tomado de aquí

[].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

Esto es un truco, pero podrías intentar cargar el gif en un iframe y llamar a window.stop() desde dentro del iframe (sobre sí mismo) una vez que la imagen se haya cargado. Esto evita que el resto de la página se detenga.

Answer 4

Inspirado por la respuesta de @Karussell, escribí a Gifffer. Compruébelo aquí https://github.com/krasimir/gifffer

Automáticamente agrega control stop / play en la parte superior de tu Gif.