剛剛在這篇文章看到了這個:
一直以來都知道點陣圖是逐像素存資料的,且大部分情況沒有壓縮。
不過我對於點陣圖的理解就僅僅於此。
看了這個記錄後讓我想要也靠自己做一個出來,於是有了這篇文章
首先呢,想做出來就要先知道點陣圖的格式,這個部分我參考這篇文章:
雖是13年前的文章,不過十分詳細,相當受用。
純看文章不易理解,因此這裡我作出一張小點陣圖做比對:
點陣圖的標頭依序以不同的顏色框起來了,詳細對照上面那篇文章即可,這裏就不細述。
不過要特別注意的是 0A 這個位置,這裏代表著像素資料從哪個位置開始。(參考上圖)
資料部分是以小端序 (Little Endian) 儲存。因此雖然是 RGB 格式,實際上存的順序是 BGR 才對。
像素的預設順序以下方表格呈現,一目瞭然:
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
理解了所有規範後,接著就能親自出馬了( 20 倍加速):
還沒完。
由於覺得以後肯定還會用上這個花樣。(我總是喜歡一些有的沒的)
所以,要是每次都要這樣親自做那還得了?
於是我做了一個能自動轉換文字變成點陣圖的小工具:連結在這裏。
這樣就能輕鬆轉換不單純的點陣圖惹ㄏㄏ
備註:
- 轉換點陣圖:https://gist.github.com/vukicevic/8112515
>> 這個方法實現的格式與上面參考的點陣圖檔案格式略有出入。(它省略了調色盤) - 自訂 input :https://itnext.io/how-to-make-a-custom-file-upload-input-c39e3f981b06