79

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

在 Firefox 中，在页面末尾使用window.stop()对我不起作用。

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

4

4 回答 4

70

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

它会自动在您的 Gif 上添加停止/播放控制。

于 2014-06-19T18:43:37.730 回答
60

这不是一个跨浏览器解决方案，但它适用于 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);
    }
}
于 2010-11-25T11:53:19.413 回答
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();
于 2014-07-11T21:47:46.890 回答
4

这有点小技巧，但是您可以尝试将 gif 加载到 iframe 中，并window.stop()在图像加载后从 iframe 内部（在其自身上）调用。这可以防止页面的其余部分停止。

于 2010-09-10T21:33:48.410 回答