以编程方式停止GIF动画 [英] Stopping GIF Animation Programmatically

问题描述

我正在开发一个Twitter应用程序，它直接从Twitter上引用图像。
如何防止动画GIF被播放？使用 window.stop（）页面的结尾在Firefox中不适用于我。

是否有更好的JavaScript hack？最好这应该适用于所有浏览器

解决方案

这不是一个跨浏览器的解决方案，但这工作在Firefox和Opera（不在ie8 ： - /）。从这里取

  [] slice.apply（document.images）.filter（is_gif_image）.MAP（freeze_gif）。 
 
函数is_gif_image（i）{
 return /^(?!data:).*\.gif/i.test(i.src）; 
} 
 
函数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）; 
尝试{
 i.src = c.toDataURL（image / gif）; //如果可能的话，保留所有css方面
} catch（e）{//跨域 - 模仿原始的所有标签属性
 for（var j = 0，a; a = i。属性[j]; j ++）
 c.setAttribute（a.name，a.value）; 
 i.parentNode.replaceChild（c，i）; 
} 
} 
  

I am developing a Twitter application which references to the images directly from Twitter. How can I prevent animated gifs from being played?

Using window.stop() at the end of the page does not work for me in Firefox.

Is there a better JavaScript hack? Preferable this should work for all browsers

解决方案

This is not a cross browser solution but this worked in firefox and opera (not in ie8 :-/). Taken 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);
    }
}

这篇关于以编程方式停止GIF动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！