JavaScript实现获取图片文件真实格式的示例代码.docx
第
JavaScript实现获取图片文件真实格式的示例代码
目录常见方式判断图片格式图像数据简单说明JS读取图片真实格式svg格式的判断总结前面博文有提到，当前主流浏览器能支持的图片格式，是七种：jpg、png、gif、bmp、ico、webp、svg，其中，前六种都是位图，svg则是唯一的矢量图。
每种格式的图片，都有自己特有的优缺点以及数据结构，本篇博文的目的就是基于不同格式的图像二进制数据，获取到图片的真实格式。
常见方式判断图片格式
当我们进行前端开发，需要处理图片上传功能，针对图片格式做判断时，常规的方法都是使用文件后缀名来判断，如下代码所示：
input.addEventListener(change,(e)={
constfile=e.target.files[0]
constformat=file.name.substring(file.name.lastIndexOf(.)+1).toLowerCase()
},false)
以上代码，监听上传控件的事件，得到要上传的文件信息，获取文件名称，然后通过获取文件名称截取文件后缀名，以后缀名作为图片文件的格式。
这段代码，大部分人都比较熟悉，也有很多场景下是这样来判断图片格式的，但如果我们强行修改了文件的后缀名，则此方法就失效了。
我们知道gif格式图片的位深度是8，如果我们强制把位深度为32的png格式的图片后缀名改成gif，这个图片文件依然可以正常使用：
上图所示，就是将png格式文件后缀名改成了gif，图片系统信息显示格式为gif，但是位深度还是32，图像本质上还是png格式的。
这个时候，单纯的通过后缀名来判断图片的格式，就不再准确了，我们需要另外的方式来获取图片文件的真实格式。而这种方式就需要使用到前端二进制相关的知识，见前文介绍深入理解前端字节二进制知识以及相关API。
修改后缀名的方式
几种位图格式之间，是可以相互修改后缀名，图片仍能正常使用gif动图后缀名改成其他位图格式，则动效会失效，变成静态图位图格式的后缀名如果改成矢量图svg，则图片失效，将无法使用svg图片文件后缀名改成位图格式，图片也将无法使用
图像数据简单说明
不同格式的图像所存储的数据是不一样的，都有自己特殊的数据结构。
依据各个格式图像不同的数据结构，我们通过类型数组中的图像数据，就能判断出图片的真实格式。
如jpg格式，它的图像数据结构中，最前面2个字节是一个固定取值0xFFD8，第三个字节一般也是固定0xFF。如png格式，它的图像数据结构中，最前面8个字节就是PNG文件署名域，可以很好的标识出当前图像的格式就是PNG。如bmp格式，它的图像数据结构中，最前面14个字节存储的是文件头信息，而最前面2个字节存储的就是文件类型：BM。如webp格式，需要从最前面移动8个字节以后，取接下来的4个字节的信息，代表文件类型：WEBP
针对不同位图的的数据判断，可以使用下面表格列出的方式：
格式标识的字节数对应的十进制值偏移量jpg32552162550png8137807871131026100gif371,73,700webp487,69,66,808ico40,0,1,00bmp266770
其中，偏移量为0，表示取最前面几个字节的数据；webp的偏移量为8，表示从最前面移动8个字节后，再取4个字节的标识符。
上面的表格，已经列出了当前浏览器支持的位图图像，字节判断标识，通过读取相应的数据做对比就得到了真实的格式。
以上几种格式中，bmp、gif、webp取到的数据，都能对应各自特有的署名标识，前面有提到BM和WEBP，gif格式的则是GIF。可以运用字符编码方面的知识，如使用String.fromCharCode方法对数值进行转换，具体的前端字符编码知识见前文前端开发中需要搞懂的字符编码
//bmp
String.fromCharCode(66)//B
String.fromCharCode(77)//M
//gif
String.fromCharCode(71)//G
String.fromCharCode(73)//I
String.fromCharCode(70)//F
//webp
String.fromCharCode(87)//W
String.fromCharCode(69)//E
String.fromCharCode(66)//B
String.fromCharCode(80)//P