構建動態網站，靈活性與美觀經常會成為一個矛盾。網頁設計師從視覺角度考慮，在許多地方采用了 圖片，有時甚至在動態輸出的內容上使用了圖片，比如網站的欄目、各類標題等。而這些內容往往 要經 常變換，需要WEB頁面的腳本程序根據數據庫中的內容實時輸出。傳統使用圖片的形式顯然無法勝任需要 經常變換內容的位置 ，通常是采用折衷的辦法，或降低對視覺效果的要求，讓設計師改用文字設計，或 要求維護人員不時根據實際內容重新制作並更換圖片，等等。對此，本文將 提供一種更為靈活的解決方 案。
如果你是一個WEB開發者，或多或少會遇到這樣一種情況：網頁設計師在設計網頁時，在需要動態輸出 內容的地方采用圖片，如：
而"熱點聚焦"這個名稱，也許過一兩天就要求改成"焦點訪談"等其它字樣，到時不得不重新制作一張 圖片替代。而采用文字加背景，有時不易達到好的效果。采用表格背景圖方式，需要精心調整表格的尺寸 ，而且其它的改動也會有意無意影響到它，需要小心調試。
本人在多個項目開發中遇到網頁中需要動態圖文結合輸出情況，程序員和美工往往最終都是選擇了回 避和妥協，盡管通常影響不大，但畢竟與盡善盡美的追求有所差距。於是終於產生了本文的解決方法。
先看看我們要解決的問題
我們的問題可以簡單總結為：有一張圖片，如：
現在我們要動態地將文字比如"熱點聚焦"輸出到上面，並在網頁上得到類似如下的顯示：
HTML如何顯示一張圖片
在HMTL中顯示一張圖片很簡單：<img src="bg.jpg" weight="153" height="25">。
另外我們還知道src屬性中的文件類型並沒有做限定，也就是說<img src="image.jsp">的寫法 也是合法的，同樣引用Servlet：<img src="/imageServlet">的寫法也是合法的，浏覽器解析到該 語句時，將向目標服務器發送一個HTTP請求。通過了解HTTP協議，可以知道，如果這時imageServlet做出 Content-Type為image/jpeg的正確響應(可以通過設置contentType="images/jpeg"來實現)，那麼也將正 確顯示一張圖片。這個原理也是實現將數據庫中的圖像數據顯示到網頁上所用的原理。
進一步利用這個原理，當向imageServlet請求圖像時，imageServlet不是簡單的發送原圖像數據，而 是先對原圖像數據進行一定的處理，比如在原圖片上面的指定位置加上文字，甚至對再做一些處理比如陰 影、立體等，然後再將處理後的圖像數據流發送出去，那麼不就可以得到圖文結合後的圖像了嗎？
根據以上分析，我們得到這樣的實現方法：在<img>的src屬性中調用實現上述功能的Servlet並 傳遞相關的參數，如背景圖片路徑、輸出文字、文字輸出的位置、字體、大小等，由該Servlet進行圖文 處理，並返回處理後的圖像數據，從而在網頁上顯示出加上文字的圖像。
通過Servlet實現圖文結合輸出
下面根據上面的原理編寫一個簡單的Servlet實現代碼，該Servlet能夠根據傳遞的參數要求，將文字 輸出到圖片上並向浏覽器返回圖文結合後的圖像數據，並在調用的網頁上顯示出圖文結合後的圖像（注： 該servlet僅實現了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;
/**
* 將文字用指定的字體，顏色和大小，嵌入指定圖片的指定位置,調用參數:
* text: 要嵌的文字
* imageFile: JPG圖片的虛擬路徑
* x: 文字輸出的起始X坐標位置
* y: 文字輸出的起始Y坐標位置
* fontColor: 字體顏色(例fontColor=FFFFFF)
* fontSize: 字體大小
* fontStyle: 字體風格(斜體,粗體等)
* 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; //坐標
int y = 0;
String fontColor = ""; //字體顏色
int fontSize = 0; //字體大小
String fontStyle = ""; //字體風格(斜體,粗體等)
String fontName = ""; //字體名稱
try {
//取得參數(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();
//設置顏色
g.setColor(new Color(Integer.parseInt(fontColor,16)));
//設置字體
Font mFont = new Font(fontName,Font.PLAIN,fontSize);//默認字體
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);
//輸出數據流
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(image);
imageIn.close();
}
output.close();
}
}//////////
上面獲取參數的代碼使用了一個工具類，它是擴展了request.getParameter()功能的一個類：package net.xdevelop.util;
import javax.servlet.*;
public class ParamUtil {
/**
* 獲得request中指定名稱的參數值,若有中文亂碼問題請增加轉碼部分
* @param request ServletRequest對象
* @param paramName 參數名稱
* @return 如果該變量值存在則返回該值，否則返回""
*/
public static String getParameter( ServletRequest request, String paramName ) {
String temp = request.getParameter(paramName);
if( temp != null && !temp.equals("") ) {
//若有中文問題，在此添加轉碼代碼，例：temp = new String(temp.getBytes("8859_1"), "GB2312");
return temp;
}
else {
return "";
}
}
/**
* 獲得request中的int型參數值
* @param request ServletRequest對象
* @param paramName 參數名稱
* @param defaultNum 默認值，如果沒有返回該值
* @return 如果該參數值存在則返回其轉換為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;
}
}
}///////////
實際應用
在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頁面調用，本例中要將bg.jpg文件放入根目錄，示例代碼： <img border="0" src="/TextIntoImage?text=熱點聚焦 &imageFile=/bg.jpg&x=20&y=20&fontColor=FFFFFF&fontStyle=bold&fontNam e=宋體&fontSize=16">
繼續完善
到此可以暫告一個段落了。不過還有很多地方有待繼續完善，例如：加入文字效果處理（陰影、立體 、浮雕等），文字豎排，增加對GIF文件支持等。
本文配套源碼
