巴哈姆特

哈啦區 程式設計板
查看全文

【心得】(Just for fun!) 不單純的點陣圖

綜合討論
Ctrl+Shift+W (LianSheng142) 2019-05-04 01:53:56
#1
Lag 了八年。


剛剛在這篇文章看到了這個:

一直以來都知道點陣圖是逐像素存資料的,且大部分情況沒有壓縮。
不過我對於點陣圖的理解就僅僅於此。

看了這個記錄後讓我想要也靠自己做一個出來,於是有了這篇文章


首先呢,想做出來就要先知道點陣圖的格式,這個部分我參考這篇文章:
點陣圖(Bitmap)檔案格式
雖是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 倍加速):




還沒完。

由於覺得以後肯定還會用上這個花樣。(我總是喜歡一些有的沒的)
所以,要是每次都要這樣親自做那還得了?
於是我做了一個能自動轉換文字變成點陣圖的小工具:連結在這裏

這樣就能輕鬆轉換不單純的點陣圖惹ㄏㄏ


備註:

看較舊的 18 則留言

~跡~: B19 2019-05-04 23:33

對了,直接用 Uint8Array 的話,也可以透過 URL.createObjectURL 的方式生成圖檔。缺點是比較舊的瀏覽器不支援。這就不用處理 base64 了。

Ctrl+Shift+W: B20 2019-05-05 00:40

感覺好像很棒,但都是我沒看過的東西QQ 先感謝了,我得花時間慢慢慢慢地消化

~跡~: B21 2019-05-05 22:30

我也寫著玩: https://ren1244.github.io/paste/text2bmp/

~跡~: B22 2019-05-05 22:31

我這邊是把字串用 UTF16-BE 編碼,之後也可以換其他的。

Ctrl+Shift+W: B23 2019-05-06 15:23 編輯

用 canvas 繪製就不用擔心圖片放大後稠成一坨了耶,感覺真棒。

延伸閱讀

問題關於Arduino while迴圈判斷條件失敗

2021-01-18 19:54:14

問題C#新手 for迴圈問題

2018-07-21 20:00:04

心得【閒聊】嘗試用程式迴圈的方式,解釋為什麼「專心」比較有效率。

2022-11-17 14:17:25

問題aspx 迴圈問題

2019-06-03 16:44:21

情報分享創客相關的一些資訊

2024-04-17 20:30:31

身為魔物的我也不錯吧?

看更多

龍及牠所化身的龍娘

插畫

[FF40] 人外的星期五:魔物娘公寓 新刊資訊!

同人

魔物娘小黃油《修幹啦!魔物交友會》

主題

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】