以編程方式停止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動畫

回答

相關問題