如何使用JavaScript获取GIF图片的宽度与高度

方法1：借助浏览器Image API（通用易实现） #

该方法适用于所有浏览器支持的图片格式，无需手动解析文件结构，是绝大多数场景的优先选择。原理是通过Image实例加载GIF资源后，读取原始宽高属性。

function getGifDimensions(url) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      resolve({
        width: img.naturalWidth,
        height: img.naturalHeight
      })
    }
    img.onerror = reject
    img.src = url
  })
}

// 调用示例
getGifDimensions('目标GIF的路径/地址')
  .then(dimensions => {
    console.log(`GIF宽度：${dimensions.width}px，高度：${dimensions.height}px`)
  })
  .catch(err => console.error('GIF加载失败：', err))

注意事项 #

• 若处理本地用户选中的GIF文件，可通过URL.createObjectURL(file)生成临时地址传入方法，处理完成后调用URL.revokeObjectURL()释放内存即可
• naturalWidth/naturalHeight返回的是图片的原始物理像素，和页面渲染尺寸无关，不受CSS样式干扰

方法2：解析GIF二进制头（无需加载完整资源） #

如果需要在GIF完全加载前就获取宽高，或者需要降低流量消耗，可直接解析GIF文件头的固定字段，仅需读取前10个字节就能拿到尺寸信息，性能远高于完整加载。

// 从二进制buffer中解析GIF宽高
function parseGifHeader(buffer) {
  const dataView = new DataView(buffer)
  // 校验GIF格式标识：前3字节为"GIF"
  const signature = String.fromCharCode(
    dataView.getUint8(0),
    dataView.getUint8(1),
    dataView.getUint8(2)
  )
  if (signature !== 'GIF') throw new Error('目标文件不是有效的GIF格式')
  // 宽高存储在第6-9字节，采用小端序
  const width = dataView.getUint16(6, true)
  const height = dataView.getUint16(8, true)
  return { width, height }
}

// 结合Fetch仅读取前10个字节的调用示例
async function getGifDimensionsLite(url) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  // 仅读取前10个字节的内容
  const { value } = await reader.read({ value: new Uint8Array(10) })
  return parseGifHeader(value.buffer)
}

注意事项 #

• 解析逻辑兼容标准GIF87a、GIF89a格式，覆盖绝大多数通用场景
• 跨域GIF地址需要服务端配置CORS规则，才能通过Fetch读取二进制内容

内容的提问来源于stack exchange，提问作者Dapp Composer