Programmgesteuertes Beenden der GIF-Animation

Ich entwickle eine Twitter-Anwendung, die direkt von Twitter auf die Bilder verweist. Wie kann ich verhindern, dass animierte Gifs abgespielt werden?

Die Verwendung window.stop()am Ende der Seite funktioniert in Firefox bei mir nicht.

Gibt es einen besseren JavaScript-Hack? Dies sollte vorzugsweise für alle Browser funktionieren

Inspiriert von der Antwort von @Karussell schrieb ich Gifffer. Überprüfen Sie es hier https://github.com/krasimir/gifffer

Es fügt automatisch eine Stop / Play-Steuerung über Ihrem Gif hinzu.

Dies ist keine browserübergreifende Lösung, aber dies funktionierte in Firefox und Oper (nicht in IE8: - /). Von hier genommen

[].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);
    }
}

In einem Versuch, Karussells Antwort zu verbessern, sollte diese Version browserübergreifend sein, alle Bilder einfrieren, einschließlich solcher, deren Dateiende falsch ist (z. B. Seiten zum automatischen Laden von Bildern), und nicht mit der Funktion des Originalbilds in Konflikt stehen Original, um mit der rechten Maustaste geklickt zu werden, als würde es sich bewegen.

Ich würde dafür sorgen, dass Animationen erkannt werden, aber das ist viel intensiver, als sie trotzdem einzufrieren.

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();

Dies ist ein kleiner Hack, aber Sie können versuchen, das GIF in einen Iframe zu laden und window.stop()aus dem Iframe (auf sich selbst) heraus aufzurufen, sobald das Bild geladen wurde. Dies verhindert, dass der Rest der Seite angehalten wird.