使用magicNumber判断图片类型

magic Number

起因:做项目时需要对图片的类型进行判断,但是有些图片后缀名是jpg,但是里面的内容是png的形式;里面是gif,后缀确实显示jpg等等…,为了能够准确的拿捏图片真正的数据格式,我们可以使用magic Number来对图片的二进制数据进行判断

一句话形容magic Number就是:文件的唯一标识

常见的图片

一些比较常见的图片及其magic number:

图片类型扩展名magic number(以其开头)
GIF format.gif47 49 46 38
JPEG File Interchange Format.jpgff d8 ff e0
PNG format.png89 50 4e 47
PDF format.pdf25 50 44 46
pkzip format.zip50 4b 03 04

借助ArrayBuffer,我们可以得到图片的二进制数据,在对其magic number 进行对比,即可确定图片|文件的格式

判断图片的案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zTFaCoWb-1607853259960)(%E5%90%84%E7%A7%8D%E8%BE%85%E5%8A%A9%E6%8A%80%E6%9C%AF.assets/image-.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8xkwWrnV-1607853259966)(%E5%90%84%E7%A7%8D%E8%BE%85%E5%8A%A9%E6%8A%80%E6%9C%AF.assets/image-.png)]

code

<input type="file" class="ipt">
<script>
  !(function () {
    const ipt = document.querySelector('.ipt')
    ipt.addEventListener('change', () => {
      // 拿到图片
      const file = ipt.files[0]

      // 创建文件读取对象
      const fr = new FileReader()

      // 添加load事件
      fr.addEventListener('load', () => {
        const arrBuffer = fr.result
        for (let ft in fileType) {
          if (fileType[ft] instanceof Function) {
            fileType[ft](arrBuffer) ? alert(ft) : null
          }
        }
      })

      // 读取图片
      fr.readAsArrayBuffer(file) // 读取file文件

      const hex2string = (byte) => {
        // 3 => 03  5 => 05
        return byte.toString(16).padStart(2, '0')
      }

      // 工厂函数
      const getFileType =  (hex) => {
        return (arrayBuffer) => {
          const int8Array = new Uint8Array(arrayBuffer)
          const data = int8Array.slice(0, 4)
          const hexArr = hex.split(/\s+/)
          let flag = true
          data.map((item, index) => {
            if (hex2string(item.toString(16)) !== hexArr[index]) {
              flag = false
            }
          })
          return flag
        }
      }
      const fileType = {
        jpeg: getFileType('ff d8 ff e0'),
        gif: getFileType('47 49 46 38'),
        png: getFileType('89 50 4e 47'),
        pdf: getFileType('25 50 44 46'),
        zip: getFileType('50 4b 03 04')
      }
    })
  })()
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值