提供客製化系統櫃、系統家具
專業師傅可到府為您丈量,現場亦有精美系統家具任您挑選
信義拆除提供專業迅速確實的通水管、通馬桶技術
立刻為您解決所有阻塞問題,馬桶疏通一次搞定

首頁  •  j2h 論壇 • 程式設計討論     • 

製作電子相簿中的縮圖

房東:阿龍
發表時間:2007-03-28


問題說明
 我們利用檔案上傳功能,可以輕易地將相片檔案上傳至伺服器上,並且整理成所謂的「電子相簿」。如果我們希望這本相簿的「目次頁」,能以各張相片的「縮圖」來呈現時,該怎麼辦呢?
 以往我會直接用 這種方式,強迫將原圖縮為 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);





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




  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務



  •  共 0 人回應

    姓名:
    佈告內容:
    其他選項: