以编程方式停止GIF动画


73

我正在开发一个Twitter应用程序,该应用程序直接引用来自Twitter的图像。如何防止动画gif播放?

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

是否有更好的JavaScript技巧?最好对所有浏览器都适用


如果您在您的处置有服务器端语言,我想你更好地利用服务器端的代码,以第一帧,将其存储在服务器上,并显示它不是..
暗影精灵是接种疫苗

问题是Twitter上有15到60张图片需要更改。请参阅jetwick.com(开放源代码)。
卡苏尔

是的,但是您只需更改一次,这样就不会有问题。
影子向导

Answers:


64

受@Karussell的回答启发,我写了Gifffer。在这里查看https://github.com/krasimir/gifffer

它会自动在Gif顶部添加停止/播放控件。


4
希望我能+5。
Ned Twigg

1
希望我可以在这里+5前面的注释... :)这是一段很小的(但非常聪明)的代码,用于处理这样的动画GIF。谢谢
TheCuBeMan '16

我知道这是3 1/2岁。我不在乎,这并不意味着这仍然不是很出色。今天将其插入页面,效果很好。
罗恩

如果可以的话,为什么还要加g?
马文

@Marvin我猜你在问为什么要加上“ f”。我想“ gifer”已经被拿走了。
克拉西米尔

55

这不是跨浏览器的解决方案,但是可以在Firefox和Opera中使用(不适用于ie8:-/)。采取从这里

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

3
据我所知,它使用的是HTML5,它应该可以在支持HTML5的任何浏览器上运行。据此:deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72 IE仍然不支持它。
影子巫师将

4
认为这仅适用于本地动画gif,而不是托管在其他域上的gif
donohoe 2011年

3
基于此答案的图书馆
200_success 2014年

脚本有问题,不是吗?如果.drawImage不因错误而失败,则不存在CORS问题,并且catch分支不会执行。但是,如果出现CORS问题,脚本将结束并且try/catch无法达到完整要求。我对吗?
托马什Zato -恢复莫妮卡

如果我没记错的话,在IE8 gif元素中有一个stop函数可以调用以停止动画。
保护者一

12

为了改善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();

4

这有点麻烦,但是您可以尝试将gif加载到iframe中,并window.stop()在图像加载后从iframe内部(本身)调用。这样可以防止页面的其余部分停止。


1
这会减慢页面渲染速度吗?
Karussell 2010年

我不这么认为,不。试试看!
杰森

您介意给我一个代码示例。我无法通过您的方法使用它+查看更新
Karussell 2010年

从iframe内部调用window.stop()也会停止执行原始窗口,或者您将如何执行此操作?
卡苏尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.