內(nèi)容：先看看我們要解決的問(wèn)題Html如何顯示一張圖片通過(guò)Servlet實(shí)現(xiàn)圖文結(jié)合輸出實(shí)際應(yīng)用繼續(xù)完善附錄參考資料關(guān)于作者 相關(guān)內(nèi)容： TCP/IP 介紹 TCP/IP 介紹 !== End TOC -->

黃林榕(starboy@xdevelop.net)
深圳穎源科技
2001 年 11 月

構(gòu)建動(dòng)態(tài)網(wǎng)站，靈活性與美觀經(jīng)常會(huì)成為一個(gè)矛盾。網(wǎng)頁(yè)設(shè)計(jì)師從視覺角度考慮，在許多地方采用了圖片，有時(shí)甚至在動(dòng)態(tài)輸出的內(nèi)容上使用了圖片，比如網(wǎng)站的欄目、各類標(biāo)題等。而這些內(nèi)容往往要經(jīng)常變換，需要WEB頁(yè)面的腳本程序根據(jù)數(shù)據(jù)庫(kù)中的內(nèi)容實(shí)時(shí)輸出。傳統(tǒng)使用圖片的形式顯然無(wú)法勝任需要經(jīng)常變換內(nèi)容的位置，通常是采用折衷的辦法，或降低對(duì)視覺效果的要求，讓設(shè)計(jì)師改用文字設(shè)計(jì)，或要求維護(hù)人員不時(shí)根據(jù)實(shí)際內(nèi)容重新制作并更換圖片，等等。對(duì)此，本文將提供一種更為靈活的解決方案。

假如你是一個(gè)WEB開發(fā)者，或多或少會(huì)碰到這樣一種情況：網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，在需要?jiǎng)討B(tài)輸出內(nèi)容的地方采用圖片，如：

而"熱點(diǎn)聚焦"這個(gè)名稱，也許過(guò)一兩天就要求改成"焦點(diǎn)訪談"等其它字樣，到時(shí)不得不重新制作一張圖片替代。而采用文字加背景，有時(shí)不易達(dá)到好的效果。采用表格背景圖方式，需要精心調(diào)整表格的尺寸，而且其它的改動(dòng)也會(huì)有意無(wú)意影響到它，需要小心調(diào)試。

本人在多個(gè)項(xiàng)目開發(fā)中碰到網(wǎng)頁(yè)中需要?jiǎng)討B(tài)圖文結(jié)合輸出情況，程序員和美工往往最終都是選擇了回避和妥協(xié)，盡管通常影響不大，但究竟與盡善盡美的追求有所差距。于是終于產(chǎn)生了本文的解決方法。

先看看我們要解決的問(wèn)題
我們的問(wèn)題可以簡(jiǎn)單總結(jié)為：有一張圖片，如：

現(xiàn)在我們要?jiǎng)討B(tài)地將文字比如"熱點(diǎn)聚焦"輸出到上面，并在網(wǎng)頁(yè)上得到類似如下的顯示：

HTML如何顯示一張圖片
在HMTL中顯示一張圖片很簡(jiǎn)單：<img src="http://www.QQread.com/java/bg.jpg" weight="153" height="25">。

另外我們還知道src屬性中的文件類型并沒有做限定，也就是說(shuō)<img src="image.jsp">的寫法也是合法的，同樣引用Servlet：<img src="/imageServlet">的寫法也是合法的，瀏覽器解析到該語(yǔ)句時(shí)，將向目標(biāo)服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求。通過(guò)了解HTTP協(xié)議，可以知道，假如這時(shí)imageServlet做出Content-Type為image/jpeg的正確響應(yīng)(可以通過(guò)設(shè)置contentType="images/jpeg"來(lái)實(shí)現(xiàn))，那么也將正確顯示一張圖片。這個(gè)原理也是實(shí)現(xiàn)將數(shù)據(jù)庫(kù)中的圖像數(shù)據(jù)顯示到網(wǎng)頁(yè)上所用的原理。

進(jìn)一步利用這個(gè)原理，當(dāng)向imageServlet請(qǐng)求圖像時(shí)，imageServlet不是簡(jiǎn)單的發(fā)送原圖像數(shù)據(jù)，而是先對(duì)原圖像數(shù)據(jù)進(jìn)行一定的處理，比如在原圖片上面的指定位置加上文字，甚至對(duì)再做一些處理比如陰影、立體等，然后再將處理后的圖像數(shù)據(jù)流發(fā)送出去，那么不就可以得到圖文結(jié)合后的圖像了嗎？

根據(jù)以上分析，我們得到這樣的實(shí)現(xiàn)方法：在<img>的src屬性中調(diào)用實(shí)現(xiàn)上述功能的Servlet并傳遞相關(guān)的參數(shù)，如背景圖片路徑、輸出文字、文字輸出的位置、字體、大小等，由該Servlet進(jìn)行圖文處理，并返回處理后的圖像數(shù)據(jù)，從而在網(wǎng)頁(yè)上顯示出加上文字的圖像。

通過(guò)Servlet實(shí)現(xiàn)圖文結(jié)合輸出