經驗交流

製作電子相簿中的縮圖

問題說明
　我們利用檔案上傳功能，可以輕易地將相片檔案上傳至伺服器上，並且整理成所謂的「電子相簿」。如果我們希望這本相簿的「目次頁」，能以各張相片的「縮圖」來呈現時，該怎麼辦呢？
　以往我會直接用 <img ... width="100"> 這種方式，強迫將原圖縮為 100px 的小圖；此法最簡單，但對瀏覽者不利。假若原圖的尺寸是 800x600，用了這種方法，只是在畫面上將圖縮小為 100x75；事實上，瀏覽器所接收到的仍然是原來那個大尺寸的圖。
　若要對瀏覽者友善一些的話，得另外使用圖形處理軟體，將大圖另存為小圖，一大一小同時上傳。
　上述兩種方法，一個是對瀏覽者不利，另一個則是對管理者麻煩。難道沒有兩全其美的辦法嗎？有的！

我的做法
　如果您已經安裝 GD Lib，那麼您就可以藉由 PHP 的 Image Functions 來達成所謂「兩全其美」的目標了。
　首先，我們先來看看效果如何？
　「原圖」的尺寸為 800x600，大小為 334,438 Bytes。
　「縮圖」的尺寸為 160x120，大小為 7,171 Bytes。
　在製作「縮圖」的過程中，有下列幾個重點：
1. 判斷原圖的圖形格式
　我在資料庫裡建了一個表格，它有三個欄位：「sn, filename, subname」，當我們上傳一個相片檔案時，我就將原檔的主、副檔名拆開，分別存入「filename」與「subname」欄位裡。
　因此，我就可以從資料庫中取得相片檔的副檔名，並據此來判斷其圖形格式了。
2. 傳 Header 給瀏覽器，告知圖檔格式
　如果您的相片是 JPEG 格式，您可以這樣送出 Header：
　Header("Content-type: image/JPEG");
　如果是 PNG 格式，您要改成這樣送 Header：
　Header("Content-type: image/PNG");
3. 讀取原圖
　與前一則相同，要讀取原圖時，也得視圖檔的格式，而使用不同的方法。若是 JPEG 格式時，您可以用這樣的方法：
　$src_img = ImageCreateFromJPEG("media/river.jpg");
　以 ImageCreateFromJPEG 讀取相片檔後，PHP 會設定一個儲存空間，以便存放該檔案的內容，而 $src_img 就是用來識別該儲存空間的一組編號。
4. 設定縮圖的尺寸
　我打算將縮圖尺寸設為原圖的 20%：
　$new_W = ImageSX($src_img) * .2;
　$new_H = ImageSY($src_img) * .2;
　其中的 ImageSX 與 ImageSY 是用來讀取原圖的寬度與高度。
5. 定義一個新的圖檔
　$dst_img = ImageCreate($new_W, $new_H);（GD 版本早於 2.0.1 者，請用此法）
　$dst_img = ImageCreatetruecolor($new_W, $new_H);（GD 版本在 2.0.1 以後者，請用此法）
　其中的 $dst_img 與先前 $src_img 的意義相同。
6. 將原圖複製、調整尺寸，再貼在新圖上
　ImageCopyResized($dst_img, $src_img, 0, 0, 0, 0, $new_W, $new_H, ImageSX($src_img), ImageSY($src_img));
7. 將所建立的新圖檔輸出
　同樣地，要輸出圖檔時，也得視圖檔的格式而定。若是 JPEG 格式時，您可以用這樣的方法：
　ImageJPEG($dst_img);
8. 釋放所佔用的儲存空間
　ImageDestroy($dst_img);
　ImageDestroy($src_img);

「縮圖程式」原始碼
　接著，該如何在電子相簿的「目次頁」中，搭配使用上述的「縮圖程式」呢？
　要在瀏覽器上顯示一個圖檔，您得這麼寫：<img src="......">。
　現在要顯示編號第 3 號相片的縮圖，我們就這麼寫：<img src="X_19_condensation.php?sn=3">。
　X_19_condensation.php 就是上述的「縮圖程式」，而 sn 則是用來指定相片編號的參數。
　為了方便您瞭解全貌，我寫了一支很陽春的「目次頁」程式；若您的相片數量多的話，請再自行加入「分頁」的功能。

「簡易目次頁」範例 「簡易目次頁」原始碼
2005.2.20 修訂
經驗交流