構(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)使用圖片的形式顯然無法勝任需要經(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è)名稱，也許過一兩天就要求改成"焦點(diǎn)訪談"等其它字樣，到時(shí)不得不重新制作一張圖片替代。而采用文字加背景，有時(shí)不易達(dá)到好的效果。采用表格背景圖方式，需要精心調(diào)整表格的尺寸，而且其它的改動(dòng)也會(huì)有意無意影響到它，需要小心調(diào)試。

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

?

先看看我們要解決的問題

?

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

?

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

?

?

?HTML如何顯示一張圖片

?

在HMTL中顯示一張圖片很簡(jiǎn)單：<img src="bg.jpg" weight="153" height="25">。

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

?

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

?

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

    package test.servlet;

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.*;

/**
 *
 * @author SailingLee
 */
public class TextIntoImage extends HttpServlet {

    private static final String CONTENT_TYPE = "image/jpeg;charset=GB2312";

    /** 
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(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類請(qǐng)參看后面附的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");

            //====================debug info=======================
            System.out.println("text:"+text);
            System.out.println("imageFile:"+imageFile);
        } 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();

    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet 方法。單擊左側(cè)的 + 號(hào)以編輯代碼。">
    /** 
     * Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
     * Returns a short description of the servlet.
     * @return a String containing servlet description
     */
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

  

?

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

    package test.servlet;

import java.io.UnsupportedEncodingException;
import javax.servlet.*;

/**
 *
 * @author SailingLee
 */
public class ParamUtil {

    /**
     * 獲得request中指定名稱的參數(shù)值,若有中文亂碼問題請(qǐng)?jiān)黾愚D(zhuǎn)碼部分
     * @param request ServletRequest對(duì)象
     * @param paramName 參數(shù)名稱
     * @return 如果該變量值存在則返回該值，否則返回""
     */
    public static String getParameter(ServletRequest request, String paramName) {
        String temp = request.getParameter(paramName);
        if (temp != null && !temp.equals("")) {
            try {
                //若有中文問題，在此添加轉(zhuǎn)碼代碼，例：temp = new String(temp.getBytes("8859_1"), "GB2312");
                temp = new String(temp.getBytes("8859_1"), "GB2312");
            } catch (UnsupportedEncodingException ex) {
                ex.printStackTrace();
            }
            return temp;
        } else {
            return "";
        }
    }

    /**
     * 獲得request中的int型參數(shù)值
     * @param request ServletRequest對(duì)象
     * @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;
        }
    }
}

  

?

?

實(shí)際應(yīng)用

?

?

1.在web.xml中聲明該Servlet

?

        <servlet>
        <servlet-name>TextIntoImage</servlet-name>
        <servlet-class>test.servlet.TextIntoImage</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>TextIntoImage</servlet-name>
        <url-pattern>/TextIntoImage</url-pattern>
    </servlet-mapping>
  

?

??

2.將test.servlet.TextIntoImage類和test.servlet.ParamUtil類放入WEB-INF/classes/

3.JSP頁(yè)面調(diào)用，本例中要將bg.jpg文件放入根目錄，示例代碼：

    <img border="0" src="/TextIntoImgServlet/TextIntoImage?text=熱點(diǎn)聚焦&imageFile=/images/bg.jpg&x=20&y=20&fontColor=FFFFFF&fontStyle=bold&fontName=宋體&fontSize=16"/>
  

?

繼續(xù)完善

?

到此可以暫告一個(gè)段落了。不過還有很多地方有待繼續(xù)完善，例如：加入文字效果處理（陰影、立體、浮雕等），文字豎排，增加對(duì)GIF文件支持等

?

[轉(zhuǎn)自:ht tp://www.ibm.com/developerworks/cn/java/l-imgtxt/index.html ]

Servlet實(shí)現(xiàn)動(dòng)態(tài)圖文結(jié)合輸出