一步通关：JS解析GIF总帧数，拒绝无用功！

2023-11-17 16:19:13

把握好那关键的一“帧”，方能保证图像上传的“健康”进度！

在我们的数字时代，图像和动画已成为不可或缺的表达方式。从表情包到广告再到电影，它们无处不在，让我们的交流更加丰富多彩。GIF格式更是因其独特优势，在互联网上广受欢迎。它不仅可以实现动画效果，还能兼顾体积小巧，堪称图像世界的一颗耀眼明珠。

然而，GIF图片也有一个潜在的问题：帧数过多。对于我们来说，两三帧的GIF图片可能已经足够生动，但有一些“无中生有”的GIF图片，却拥有几十甚至上百帧。这些GIF图片不仅会严重拖慢网站加载速度，还可能引起用户的视觉疲劳。

因此，在实际项目中，我们经常会遇到上传GIF图片的需求。考虑到用户体验，我们需要在前端检查GIF总帧数，如果超过一定数量则提示用户无法上传。

使用现成库并不理想

传统上，我们可以使用一些现成库来解析GIF图片。例如，jQuery中有$.GIF()方法，可以用来获取GIF图片的帧数。然而，使用现成库并不总是理想。首先，它需要额外引入脚本文件，增加了项目的体积。其次，现成库可能并不满足我们的具体需求，例如我们可能需要自定义检查帧数的阈值。

另一种方案：JS解析GIF帧数

为此，本文将提供一种基于JS的解决办法。这种方法不仅可以兼顾性能、兼容性和开发便利性，还能满足我们的具体需求。

// 以下是JS代码，用于解析GIF图片的总帧数

function getGIFFrameCount(file) {
  // 使用 FileReader 读取GIF图片文件
  const reader = new FileReader();
  reader.onload = function() {
    // 获取GIF图片的二进制数据
    const data = reader.result;

    // 检查GIF图片头
    if (data.charCodeAt(0) !== 0x47 || data.charCodeAt(1) !== 0x49 || data.charCodeAt(2) !== 0x46) {
      throw new Error('Invalid GIF file');
    }

    // 获取GIF图片的逻辑屏幕宽度和高度
    const width = data.charCodeAt(6) + (data.charCodeAt(7) << 8);
    const height = data.charCodeAt(8) + (data.charCodeAt(9) << 8);

    // 获取GIF图片的全局颜色表长度
    const colorTableLength = (data.charCodeAt(10) << 8) + data.charCodeAt(11);

    // 计算GIF图片的总帧数
    let frameCount = 0;
    let offset = 13 + colorTableLength;
    while (offset < data.length) {
      // 检查GIF图片帧头
      if (data.charCodeAt(offset) !== 0x21 || data.charCodeAt(offset + 1) !== 0xf9) {
        break;
      }

      // 计算GIF图片帧大小
      const frameWidth = data.charCodeAt(offset + 8) + (data.charCodeAt(offset + 9) << 8);
      const frameHeight = data.charCodeAt(offset + 10) + (data.charCodeAt(offset + 11) << 8);

      // 计算GIF图片帧数据长度
      const frameDataLength = (data.charCodeAt(offset + 12) << 8) + data.charCodeAt(offset + 13);

      // 更新GIF图片的总帧数
      frameCount++;

      // 更新GIF图片帧头的偏移量
      offset += 14 + frameDataLength;
    }

    // 返回GIF图片的总帧数
    return frameCount;
  };

  reader.readAsBinaryString(file);
}