是否可以检测动画gif图像客户端?
在Internet Explorer中,您可以使用onload
事件,因为它将被every frame loaded触发(在IE8中更改了行为)。
但是其他浏览器也有办法吗?
答案 0 :(得分: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();
}
答案 1 :(得分:0)
我不知道在客户端有什么办法,但我不确定。您可以做的是解析服务器端的HTML代码和任何引用的gif,并为这些图像添加一个类。但这并不是真的值得推荐,因为它至少需要对每个gif进行HTML +解析。从this example in PHP可以看出,检查gif在CPU负载方面也不是一件容易的事。