Остановка GIF-анимации программно - PullRequest
Новая
       10

Остановка GIF-анимации программно

64 голосов
/ 11 сентября 2010

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

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

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

Ответы [ 4 ]

54 голосов
/ 19 июня 2014

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

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

47 голосов
/ 25 ноября 2010

Это не кросс-браузерное решение, но оно работало в 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);
    }
}
8 голосов
/ 12 июля 2014

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

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

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();
3 голосов
/ 11 сентября 2010

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

...