如果你是一個WEB開發(fā)者，或多或少會遇到這樣一種情況：網(wǎng)頁設(shè)計師在設(shè)計網(wǎng)頁時，在需要動態(tài)輸出內(nèi)容的地方采用圖片，如下圖：

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


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

先看看我們要解決的問題\\

我們的問題可以簡單總結(jié)為：有一張圖片，如：

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

HTML如何顯示一張圖片
在HMTL中顯示一張圖片很簡單：<img src=http://cfan.net.cn/info/"bg.jpg" weight="153" height="25">。

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

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

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

通過Servlet實現(xiàn)圖文結(jié)合輸出\\

下面根據(jù)上面的原理編寫一個簡單的Servlet實現(xiàn)代碼，該Servlet能夠根據(jù)傳遞的參數(shù)要求，將文字輸出到圖片上并向瀏覽器返回圖文結(jié)合后的圖像數(shù)據(jù)，并在調(diào)用的網(wǎng)頁上顯示出圖文結(jié)合后的圖像（注：該servlet僅實現(xiàn)了JPG格式圖像文件的處理，不支持GIF）：


package net.xdevelop.merge;import javax.servlet.*;import javax.servlet.http.*;import java.io.*;import java.util.*;import java.awt.*;import java.awt.image.*;import com.sun.image.codec.jpeg.*;import net.xdevelop.util.ParamUtil;/** * 將文字用指定的字體，顏色和大小，嵌入指定圖片的指定位置,調(diào)用參數(shù): * text: 要嵌的文字 * imageFile: JPG圖片的虛擬路徑 * x: 文字輸出的起始X坐標(biāo)位置 * y: 文字輸出的起始Y坐標(biāo)位置 * fontColor: 字體顏色(例fontColor=FFFFFF) * fontSize: 字體大小 * fontStyle: 字體風(fēng)格(斜體,粗體等) * fontName: 字體名稱(如仿宋體,宋體等) */public class TextIntoImage extends HttpServlet { private static final String CONTENT_TYPE = "image/jpeg;charset=GB2312"; public void init() throws ServletException { } /** Process the HTTP Get request */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } //--------------------------------------------------------------------------------------------- /** Process the HTTP Post request */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(CONTENT_TYPE); String text = ""; //要嵌的文字 String imageFile = ""; //被嵌的圖片的虛擬路徑 int x = 0; //坐標(biāo)\\ int y = 0; String fontColor = ""; //字體顏色 int fontSize = 0; //字體大小 String fontStyle = ""; //字體風(fēng)格(斜體,粗體等) String fontName = ""; //字體名稱 try { //取得參數(shù)(ParamUtil類請參看后面附的ParamUtil類代碼) text = ParamUtil.getParameter(request,"text"); imageFile = ParamUtil.getParameter(request,"imageFile"); x = ParamUtil.getIntParameter(request,"x",0); y = ParamUtil.getIntParameter(request,"y",0); fontColor = ParamUtil.getParameter(request,"fontColor"); fontSize = ParamUtil.getIntParameter(request,"fontSize",16); fontStyle = ParamUtil.getParameter(request,"fontStyle"); fontName = ParamUtil.getParameter(request,"fontName"); } catch(Exception e) { e.printStackTrace(); } ServletOutputStream output=response.getOutputStream(); if(imageFile.toLowerCase().endsWith(".jpeg") imageFile.toLowerCase().endsWith(".jpg")) { imageFile = getServletContext().getRealPath(imageFile); InputStream imageIn = new FileInputStream(new File(imageFile)); JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(imageIn); BufferedImage image = decoder.decodeAsBufferedImage(); Graphics g=image.getGraphics(); //設(shè)置顏色 g.setColor(new Color(Integer.parseInt(fontColor,16))); //設(shè)置字體\\ Font mFont = new Font(fontName,Font.PLAIN,fontSize);//默認(rèn)字體\\ if(fontStyle.equalsIgnoreCase("italic")) mFont=new Font(fontName,Font.ITALIC,fontSize); if(fontStyle.equalsIgnoreCase("bold")) mFont=new Font(fontName,Font.BOLD,fontSize); if(fontStyle.equalsIgnoreCase("plain")) mFont=new Font(fontName,Font.PLAIN,fontSize); g.setFont(mFont); //輸出文字 g.drawString(text,x,y); //輸出數(shù)據(jù)流\\ JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output); encoder.encode(image); imageIn.close(); } output.close(); }}//////////





上面獲取參數(shù)的代碼使用了一個工具類，它是擴(kuò)展了request.getParameter()功能的一個類：

package net.xdevelop.util;import javax.servlet.*;public class ParamUtil { /** * 獲得request中指定名稱的參數(shù)值,若有中文亂碼問題請增加轉(zhuǎn)碼部分 * @param request ServletRequest對象\\ * @param paramName 參數(shù)名稱 * @return 如果該變量值存在則返回該值，否則返回"" */ public static String getParameter( ServletRequest request, String paramName ) { String temp = request.getParameter(paramName); if( temp != null && !temp.equals("") ) { //若有中文問題，在此添加轉(zhuǎn)碼代碼，例：temp = new String(temp.getBytes("8859_1"), "GB2312"); return temp; } else { return ""; } } /** * 獲得request中的int型參數(shù)值 * @param request ServletRequest對象\\ * @param paramName 參數(shù)名稱 * @param defaultNum 默認(rèn)值，如果沒有返回該值 * @return 如果該參數(shù)值存在則返回其轉(zhuǎn)換為int型的值，否則返回defaultNum */ public static int getIntParameter( ServletRequest request, String paramName, int defaultNum ) { String temp = request.getParameter(paramName); if( temp != null && !temp.equals("") ) { int num = defaultNum; try { num = Integer.parseInt(temp); } catch( Exception ignored ) { } return num; } else { return defaultNum; } }}///////////




實際應(yīng)用

在web.xml中聲明該Servlet

<servlet> <servlet-name>textintoimage</servlet-name> <servlet-class>net.xdevelop.merge.TextIntoImage</servlet-class></servlet><servlet-mapping> <servlet-name>textintoimage</servlet-name> <url-pattern>/TextIntoImage</url-pattern></servlet-mapping>





將net.xdevelop.merge.TextIntoImage類和net.xdevelop.util.ParamUtil類放入WEB-INF/classes/
JSP頁面調(diào)用，本例中要將bg.jpg文件放入根目錄，示例代碼： <img border="0" src=http://cfan.net.cn/info/"/TextIntoImage?text=熱點聚焦&imageFile=/bg.jpg&x=20&y=20&fontColor=FFFFFF&fontStyle=bold&fontName=宋體&fontSize=16">
繼續(xù)完善
到此可以暫告一個段落了。不過還有很多地方有待繼續(xù)完善，例如：加入文字效果處理（陰影、立體、浮雕等），文字豎排，增加對GIF文件支持等。

本文代碼下載：demo.zip