Остановка анимации GIF Programmatically

Question

Я разрабатываю приложение Twitter, которое ссылается на изображения непосредственно из Twitter. Как предотвратить воспроизведение анимированных gifs?

Использование window.stop() в конце страницы не работает для меня в Firefox.

Есть ли лучший JavaScript-хак? Предпочтительно это должно работать для всех браузеров.

Answer 1

Это не кросс-браузерное решение, но это работало в firefox и opera (не в ie8: - /). Взятые 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

Это немного взломанный, но вы можете попробовать загрузить gif в iframe и вызвать window.stop() изнутри iframe (по себе) после загрузки изображения. Это предотвратит остановку остальной части страницы.

Answer 3

Вдохновленный ответом @Karussell я написал Gifffer. Здесь вы можете ознакомиться здесь https://github.com/krasimir/gifffer

Он автоматически добавляет контроль остановки/воспроизведения на вершине вашего Gif.

Answer 4

В попытке улучшить ответ Каруселла эта версия должна быть кросс-браузером, замораживает все изображения, включая те, у которых есть неправильный файл, заканчивающийся (например, страницы автоматической загрузки изображений) и не противоречит функции оригинала изображение, позволяющее оригиналу щелкнуть правой кнопкой мыши, как будто он перемещается.

Я бы заставил его обнаруживать анимацию, но это намного более интенсивное, чем просто замораживание.

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