在之前的Note 4，已經學會了如何使用SDK的"內嵌式"陽春網頁，如下。
檔案：component/common/example/httpd/example_httpd.c
HANA APP
void homepage_cb(struct httpd_conn *conn)
{
// 中間略
// GET homepage
if(httpd_request_is_method(conn, "GET")) {
char *body = \ // HTML code直接寫在C code裡的"內嵌式"寫法
"<HTML><BODY>" \
"It Works<BR>" \
"<BR>" \
"Can test GET by <A href=\"/test_get?test1=one%20%26%202&test2=three%3D3\">/test_get?test1=one%20%26%202&test2=three%3D3</A><BR>" \
"Can test POST by UI in <A href=\"/test_post.htm\">/test_post.htm</A><BR>" \
"</BODY></HTML>";
但我們一般寫網頁，不可能只有一個index.html而已，通常還有css、javascript，甚至是jpg、png等圖片檔，這樣要怎麼寫進C code呢？
以我淺薄的知識，想出了以下幾種解法，還有實際上操作遇到的困難。（如果有其他解法請一定要告訴我！）
Amebaz2 SDK裡有FAT file system的example，只要打開"CONFIG_EXAMPLE_FATFS"這個macro就可以了。可支援filesystem建立在
a. 開發板內的flash，位置0x200000 ~ 0xA9000，共512KB => 我還沒研究怎麼把www/放進這個位置，但理論上應該可行
b. 外接式SD card => 失敗。因為SDK內缺乏應有的header file，無法編譯。已經有去論壇詢問了～
c. USB storage => README寫說只支援Ameba-1，所以不行
a. 把圖片用html的方式呈現 => 請參考本網址。很神奇的方式，但會讓size暴增（該網頁的例子中，原本3KB的jpg，轉成html code會變成274KB），所以放棄此解法。因為經過實驗，我放了一個20多KB的jpg檔，網頁就開不起來了。
b. 把圖片直接轉成binary，寫進http封包，並把header type改為image/jpeg => 這招可以，但如同我剛才說的，只要jpg大於20KB就會開不太起來。
c. 比較大的圖片放在其他空間，用url指定過去吧 => 這招OK，寫法如下。
<img src="https://XXX.YY/XXX.jpg"></img>
綜合以上幾個想法，最後使用了2.b和2.c(其實1.a應該才是正解？)。也就是html、css、js檔案我先轉成binary，圖片就用url。
下一篇來介紹一下轉binary的方法，也是使用SDK內附的小工具就好了喔！
iThome鐵人賽
看影片追技術