技術標籤：日後必有用javascriptmagic numbermagicNumberArrayBuffer

magic Number

起因：做專案時需要對圖片的型別進行判斷，但是有些圖片字尾名是jpg，但是裡面的內容是png的形式；裡面是gif，字尾確實顯示jpg等等…，為了能夠準確的拿捏圖片真正的資料格式，我們可以使用magic Number來對圖片的二進位制資料進行判斷

一句話形容magic Number就是：檔案的唯一標識

常見的圖片

一些比較常見的圖片及其magic number:

藉助ArrayBuffer，我們可以得到圖片的二進位制資料，在對其magic number 進行對比，即可確定圖片|檔案的格式

判斷圖片的案例

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>