프로그래밍 방식으로 GIF 애니메이션 중지

프로그래밍 방식으로 GIF 애니메이션 중지

---

Twitter에서 직접 이미지를 참조하는 Twitter 애플리케이션을 개발 중입니다. 애니메이션 GIF가 재생되지 않도록하려면 어떻게해야합니까?

window.stop()페이지 끝에서 사용하면 Firefox에서 작동하지 않습니다.

더 나은 JavaScript 해킹이 있습니까? 모든 브라우저에서 작동하는 것이 좋습니다.

---

@Karussell의 답변에서 영감을 받아 Gifffer를 썼습니다. 여기에서 확인하십시오 https://github.com/krasimir/gifffer

Gif 위에 중지 / 재생 컨트롤을 자동으로 추가합니다.

---

이것은 크로스 브라우저 솔루션이 아니지만 이것은 파이어 폭스와 오페라에서 작동했습니다 (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);
    }
}

---

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

---

이것은 약간의 해킹이지만 gif를 window.stop()iframe에로드하고 이미지가로드되면 iframe 내부에서 호출 해 볼 수 있습니다. 이렇게하면 나머지 페이지가 중지되지 않습니다.

참고 URL : https://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically