前端JavaScript获取图片文件的真实格式

常见方式判断图片格式

当我们进行前端开发，需要处理图片上传功能，针对图片格式做判断时，常规的方法都是使用文件后缀名来判断，如下代码所示：

input.addEventListener('change', (e) => {const file = e.target.files[0]const format = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
}, false) 

以上代码，监听上传控件的事件，得到要上传的文件信息，获取文件名称，然后通过获取文件名称截取文件后缀名，以后缀名作为图片文件的格式。这段代码，大部分人都比较熟悉，也有很多场景下是这样来判断图片格式的，但如果我们强行修改了文件的后缀名，则此方法就失效了。我们知道gif格式图片的位深度是8，如果我们强制把位深度为32的png格式的图片后缀名改成gif，这个图片文件依然可以正常使用：

上图所示，就是将png格式文件后缀名改成了gif，图片系统信息显示格式为gif，但是位深度还是32，图像本质上还是png格式的。

这个时候，单纯的通过后缀名来判断图片的格式，就不再准确了，我们需要另外的方式来获取图片文件的真实格式。而这种方式就需要使用到前端二进制相关的知识，见前文介绍深入理解前端字节二进制知识以及相关API。

修改后缀名的方式

几种位图格式之间，是可以相互修改后缀名，图片仍能正常使用> > gif动图后缀名改成其他位图格式，则动效会失效，变成静态图> > 位图格式的后缀名如果改成矢量图svg，则图片失效，将无法使用> > svg图片文件后缀名改成位图格式，图片也将无法使用

图像数据简单说明

不同格式的图像所存储的数据