| 經驗交流 |
|
|---|---|
|
一個可供 HTML 檔引用的簡易計數器（使用 Image Functions） | |
問題說明 | |
| 早期我在寫學校網頁時，曾在首頁上加個計數器，用來顯示該站的熱門程度。當時，我還不會撰寫 ASP、PHP 之類的程式，卻又想在純 HTML 的環境下動態地產生計數效果，所以我引用了中山大學免費的計數器。它是一支 CGI 程式，會依照使用者傳入之參數值，回傳一個數字圖檔，使用者可以直接在網頁中秀出這個圖來，的確十分方便；但是，程式究竟是人家寫的，資料毀損而導致計數器歸零時，我們也拿它沒辦法。 | |
|
您是本頁的第 | |
| 如果您會寫一些 PHP 的程式，是不是也可以扮演中山大學的角色，提供免費的計數器供學生在個人網站使用呢？ | |
|
我的做法 | |
| 想利用 PHP 來產生一個 PNG 或 JPEG 格式的圖檔的話，您得先安裝 GD Lib 才行，其安裝步驟請自行參閱相關書籍。請注意，目前的 GD 已經不支援 GIF 格式了，所以您無法藉由 PHP 的 Image Functions 來產生一個 GIF 圖檔。 | |
| 我利用以下的程式產生一個三位數的計數圖檔： | |
 | |
|
01 header("Content-type: image/png"); 02 $dis_im = ImageCreate(60, 20); 03 $src_im = ImageCreateFromPNG("counter/1/1.png"); 04 ImageCopy($dis_im, $src_im, 0, 0, 0, 0, 20, 20); 05 $src_im = ImageCreateFromPNG("counter/1/3.png"); 06 ImageCopy($dis_im, $src_im, 20, 0, 0, 0, 20, 20); 07 $src_im = ImageCreateFromPNG("counter/1/5.png"); 08 ImageCopy($dis_im, $src_im, 40, 0, 0, 0, 20, 20); 09 ImagePNG($dis_im); 10 ImageDestroy($dis_im); 11 ImageDestroy($src_im); | |
| 01 先傳 Header 給瀏覽器，告知檔案格式為 PNG（若欲產生 JPEG 圖檔的話，請改為 image/jpeg）。 | |
| 02 定義圖形大小，並用 $dis_im 記下這個圖的識別代號。 | |
| 因為我要輸出的圖檔係由三個小圖所組成，每個小圖都是 20 * 20 大小，所以將會組合出一個 60 * 20 的新圖來。 | |
| 03 使用 ImageCreateFromPNG 函數讀取一個現有的 PNG 圖檔，並用 $src_im 記下這個圖的識別代號。 | |
| 04 使用 ImageCopy 函數，自 $src_im 的左上角（0, 0）起中讀取一個 20 * 20 的區域（就是整個 $src_im 啦），然後貼在 $dis_im 的（0, 0）位置。 | |
| 05 - 08 重複兩次 03 - 04 的動作，只是貼圖的位置不同，分別改為（20, 0）與（40, 0）。 | |
| 09 將 $dis_im 的內容輸出為一個 PNG 圖檔。 | |
| 10 - 11 分別釋放 $dis_im 與 $src_im 所佔用的記憶體。 | |
|
進階做法 | |
| 上述的程式只是在說明 PHP 作圖的重要步驟，真要實際應用在多人共用的情況下，得結合資料庫才行。 | |
| 我建立了一個名為 demo_counter 的資料表，它只有兩個欄位：owner 與 amount。透過以下的程式中去存取每位 owner 在資料庫中的 amount 值，來組合成一個計數圖檔。 | |
| 該圖檔之大小依 amount 之位數而定，前方不補零。我將 amount 的資料型態設為 Integer(4 bytes)，所以最多可儲存到十位數。同時這個圖檔還可依傳入的 style 參數，來組合出不同風格的計數圖形。 | |
|
| |
| 只要您去重整這個計數器所在的網頁，計數值就會立刻加 1。對於實際訪客人數而言，這可能有些浮濫，但是對喜歡人氣指數高的使用者來說，應該不會介意才是。 | |
| 若您要將計數器開放給他人使用時，請為每個申請者在 counter 的資料表建立其帳號（owner），並將其計數初值（amount）設為 1。 | |
| 經驗交流 |
|