高性能的獲取圖片信息

一直經過一些圖片模塊來取得圖片的相關信息，最近在使用的過程當中打開源碼看了一下，學習到了很多東西。

首先，一個文件的基本信息都是存在於文件自身，即便壓縮工具會去掉一些信息，但基本的文件類型，寬，高等都還會存在，因此，咱們須要知道這些信息具體存在於哪一個位置上。

經過相關搜索，咱們獲得了以下的信息：

能夠看到，幾乎全部的文件起始位置存放的都是 文件類型，jpg 有三種 16 進制標記，png 只有一種，也就是說，我只須要以下判斷，就能夠知道文件是什麼文件。

function getFileType(buffer){
    if(buffer_data[0] == 0x89 && buffer_data[1] == 0x50 && buffer_data[2] == 0x4E && buffer_data[3] == 0x47 && buffer_data[4] == 0x0D && buffer_data[5] == 0x0A && buffer_data[6] == 0x1A && buffer_data[7] == 0x0A){
        return 'png';
    }else if(){
        //...
    }
}

嚴謹完整的判斷應該是如上的代碼，但經過觀察整個列表，其實會發現，不少信息都是惟一的，好比 jpg 有三種，但三種的前三位都是 FF D8 FF, 並且其餘類型的文件都沒有與其同樣的，因此，能夠不須要寫那麼長的判斷，只需判斷前三位便可。

附： 完整的 Hex signature 列表：https://en.wikipedia.org/wiki/List_of_file_signatures

那圖片的寬高信息又存在於哪些位置呢？不一樣類型的文件，寬高信息存儲的位置都不同，如 png 的 hex 信息以下：

第 17 到 20 字節區間的位置存儲着 png 的寬度信息，經過將其轉換爲 10 進制，就能夠獲得咱們要的寬度值了。
如： 16 進制的 0000005A 轉換爲 10 進製爲 90。

知道原理後，若是隻是想簡單的獲得圖片的一些基本信息，只須要寫一點代碼就能夠很是高性能的獲取，而不須要去依賴一些稍重的圖形模塊。
具體代碼能夠查看： https://github.com/weixin/gulp-lazyimagecss/blob/master/lib/fastimagesize.js

知道原理後，也能夠聯想到更多，好比，.png 有可能並非 png，有多是其餘; 若是一個圖片上傳模塊驗證不夠完美，我把一個 php 文件的頭改成圖片頭，欺騙了程序進行上傳後執行，結果就有可能 呵呵 了。

文件的 hex 值能夠經過一些 hex 工具查看，好比 sublime 就有 hex viewer 插件。