2009-08-25 78 views

回答

0

我不知道有什么办法可以在客户端进行,但我不确定。你可以做的是解析服务器端的HTML代码和任何引用的gif,并为这些图像添加一个类。但这并不是真正的建议,因为它至少包含一个附加的HTML +解析每个gif的解析。从this example in PHP可以看出,检查gif在CPU负载方面也不是微不足道的。

+0

我渣油同意,我不认为有任何方式的JavaScript – Josh 2009-08-25 19:26:52

+0

我认为要做到这一点,或许真的是可能的帆布的API。只需每x毫秒对图像进行一次采样,然后计算图像的散列值。不太可靠,但它可以工作... – doekman 2009-08-27 13:40:34

14

我刚刚写了一些检测动画gif的JS。适用于除IE 9以外的大多数新型浏览器。

声明:仅当图像的域名起源与您正在从中加载脚本的页面相同时,才有效。

请参阅最新版本的代码的要点:https://gist.github.com/3012623

function isAnimatedGif(src, cb) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', src, true); 
    request.responseType = 'arraybuffer'; 
    request.addEventListener('load', function() { 
     var arr = new Uint8Array(request.response), 
      i, len, length = arr.length, frames = 0; 

     // make sure it's a gif (GIF8) 
     if (arr[0] !== 0x47 || arr[1] !== 0x49 || 
      arr[2] !== 0x46 || arr[3] !== 0x38) 
     { 
      cb(false); 
      return; 
     } 

     //ported from php http://www.php.net/manual/en/function.imagecreatefromgif.php#104473 
     //an animated gif contains multiple "frames", with each frame having a 
     //header made up of: 
     // * a static 4-byte sequence (\x00\x21\xF9\x04) 
     // * 4 variable bytes 
     // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?) 
     // We read through the file til we reach the end of the file, or we've found 
     // at least 2 frame headers 
     for (i=0, len = length - 9; i < len, frames < 2; ++i) { 
      if (arr[i] === 0x00 && arr[i+1] === 0x21 && 
       arr[i+2] === 0xF9 && arr[i+3] === 0x04 && 
       arr[i+8] === 0x00 && 
       (arr[i+9] === 0x2C || arr[i+9] === 0x21)) 
      { 
       frames++; 
      } 
     } 

     // if frame count > 1, it's animated 
     cb(frames > 1); 
    }); 
    request.send(); 
} 
+0

如果所有帧都具有相同的数据会怎么样?然后,gif将被检测为动画,而实际上它不是。一个万无一失(但更昂贵)的解决方案是实际比较帧数据,直到找到两个实际不同的帧数据。 – Gautam 2015-03-13 11:06:36

+0

好点@Gautam如果你愿意,我会很乐意看到一个实现! – lakenen 2015-03-13 19:19:24

+0

哈哈,不要屏住呼吸:) 这意味着有人想考虑使用此功能的人考虑。我不会预见自己很快会实施它... – Gautam 2015-03-16 07:57:33

相关问题