GIF-Animation programmgesteuert stoppen

Question

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

Die Verwendung von window.stop() am Ende der Seite funktioniert nicht für mich in Firefox.

Gibt es einen besseren JavaScript-Hack? Vorzugsweise sollte dies für alle Browser funktionieren.

Answer 1

Dies ist keine Cross-Browser-Lösung, aber das funktionierte in Firefox und Oper (nicht in ie8: - /). Genommen from here

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

Dies ist ein bisschen ein Hack, aber Sie könnten versuchen, das gif in einen iframe zu laden und window.stop() aus dem iframe (auf sich selbst) aufrufen, sobald das Bild geladen wurde. Dies verhindert, dass der Rest der Seite angehalten wird.

Answer 3

Inspiriert durch die Antwort von @Karussell ich Gifffer schrieb. Schau es dir hier an https://github.com/krasimir/gifffer

Es fügt automatisch Stop/Play-Kontrolle auf Ihrem GIF hinzu.

Answer 4

In einem Versuch, Karussells Antwort zu verbessern, sollte diese Version Browser-übergreifend sein, alle Bilder einfrieren, einschließlich derjenigen, die eine falsche Dateiendung haben (z. B. automatische Bildlade-Seiten) und nicht mit der Funktion des Originals kollidieren Bild, so dass das Original mit der rechten Maustaste angeklickt werden kann, als würde es sich bewegen.

Ich würde es machen, um Animation zu erkennen, aber das ist viel intensiver, als nur sie zu frieren.

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