以编程方式停止GIF动画

我正在开发一个Twitter应用程序，它直接从Twitter引用图像。如何防止GIF动画被播放？以编程方式停止GIF动画

在页面末尾使用window.stop()在Firefox中不适用于我。

是否有更好的JavaScript hack？更适合所有浏览器

来源

2010-09-10 Karussell

如果您在您的处置有服务器端语言，我想你更好地利用服务器端的代码，以第一帧，将其存储在服务器上，并显示它不是.. – 2010-11-25 11:45:00

的问题是，有15至60来自twitter的图像改变。请参阅http://jetwick.com（开源）。 – Karussell 2010-11-25 17:16:17

是的，但你只改变一次，所以它不应该是一个问题。 – 2010-11-27 16:58:05

这不是一个跨浏览器的解决方案，但这工作在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); 
    } 
}

来源

2010-11-25 11:53:19 Karussell

就我所见，它使用的是HTML5，它应该可以在任何支持HTML5的浏览器上使用。根据这个：http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ IE仍然不支持它。 – 2010-11-25 11:59:55

感谢您指出这一点 – Karussell 2010-11-25 17:23:28

我*认为*这将只适用于本地动画GIF，而不是那些托管在不同的域名 – donohoe 2011-08-19 20:45:15

这是一个黑客攻击，但您可以尝试将gif加载到iframe中，并在图像加载后从iframe内部（本身）调用window.stop()。这可以防止页面的其他部分停止。

来源

2010-09-10 21:33:48 Jason

这会减慢页面渲染速度吗？ – Karussell 2010-09-10 21:46:24

我不这么认为，不。尝试一下！ – Jason 2010-09-11 00:51:46

你介意给我一个代码示例。我无法使用你的方法+看到更新 – Karussell 2010-11-25 11:38:13

通过@Karussell的答案我写Gifffer启发。看看这里https://github.com/krasimir/gifffer

它会自动添加停止/播放控制在你的GIF顶部。

来源

2014-06-19 18:43:37 Krasimir

希望我能+5这个。 – 2015-08-02 05:04:36

希望我能+5以前的评论在这里...... :)这是一个伟大的小（但非常聪明）处理这样的动画GIF代码。谢谢 – TheCuBeMan 2016-04-14 09:13:07

为了改善Karussell的回答，该版本应该是跨浏览器的，冻结所有图像，包括那些文件结尾不正确的图像（例如自动图像加载页面），并且不会与原始图像的功能发生冲突图像，允许原始图像被移动时被右击。

我会让它检测动画，但这比仅仅冻结它们更加密集。

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

来源

2014-07-11 21:47:46 Makaze

以编程方式停止GIF动画

回答

相关问题