HttpServletResponse 输出页面html

构建动态网站，灵活性与美观经常会成为一个矛盾。网页设计师从视觉角度考虑，在许多地方采用了图片，有时甚至在动态输出的内容上使用了图片，比如网站的栏目、各类标题等。而这些内容往往 要经常变换，需要WEB页面的脚本程序根据数据库中的内容实时输出。传统使用图片的形式显然无法胜任需要经常变换内容的位置 ，通常是采用折衷的办法，或降低对视觉效果的要求，让设计师改用文字设计，或要求维护人员不时根据实际内容重新制作并更换图片，等等。对此，本文将 提供一种更为灵活的解决方案。

如果你是一个WEB开发者，或多或少会遇到这样一种情况：网页设计师在设计网页时，在需要动态输出内容的地方采用图片，如：

而"热点聚焦"这个名称，也许过一两天就要求改成"焦点访谈"等其它字样，到时不得不重新制作一张图片替代。而采用文字加背景，有时不易达到好的效果。采用表格背景图方式，需要精心调整表格的尺寸，而且其它的改动也会有意无意影响到它，需要小心调试。

本人在多个项目开发中遇到网页中需要动态图文结合输出情况，程序员和美工往往最终都是选择了回避和妥协，尽管通常影响不大，但毕竟与尽善尽美的追求有所差距。于是终于产生了本文的解决方法。

先看看我们要解决的问题

我们的问题可以简单总结为：有一张图片，如：

现在我们要动态地将文字比如"热点聚焦"输出到上面，并在网页上得到类似如下的显示：

HTML如何显示一张图片

在HMTL中显示一张图片很简单：<img src="bg.jpg" weight="153" height="25">。

另外我们还知道src属性中的文件类型并没有做限定，也就是说<img src="p_w_picpath.jsp">的写法也是合法的，同样引用Servlet：<img src="/p_w_picpathServlet">的写法也是合法的，浏览器解析到该语句时，将向目标服务器发送一个HTTP请求。通过了解HTTP协议，可以知道，如果这时p_w_picpathServlet做出Content-Type为p_w_picpath/jpeg的正确响应(可以通过设置contentType="p_w_picpaths/jpeg"来实现)，那么也将正确显示一张图片。这个原理也是实现将数据库中的图像数据显示到网页上所用的原理。

进一步利用这个原理，当向p_w_picpathServlet请求图像时，p_w_picpathServlet不是简单的发送原图像数据，而是先对原图像数据进行一定的处理，比如在原图片上面的指定位置加上文字，甚至对再做一些处理比如阴影、立体等，然后再将处理后的图像数据流发送出去，那么不就可以得到图文结合后的图像了吗？

根据以上分析，我们得到这样的实现方法：在<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. p_w_picpath.*;import com.sun.p_w_picpath.codec.jpeg.*;import net.xdevelop.util.ParamUtil;/** * 将文字用指定的字体，颜色和大小，嵌入指定图片的指定位置, 调用参数: * text: 　　　要嵌的文字 * p_w_picpathFile: 　JPG图片的虚拟路径 * x: 　　　　　文字输出的起始X坐标位置 * y: 　　　　　文字输出的起始Y坐标位置 * fontColor: 　字体颜色(例fontColor=FFFFFF) * fontSize: 　字体大小 * fontStyle: 　字体风格(斜体,粗体等) * fontName: 　字体名称(如仿宋体,宋体等) * /public class TextIntoImage extends HttpServlet { private static final String CONTENT_TYPE = "p_w_picpath/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 p_w_picpathFile = ""; //被嵌的图片的虚拟路径 int x = 0; //坐标 int y = 0; String fontColor = ""; //字体颜色 int fontSize = 0; //字体大小 String fontStyle = ""; //字体风格(斜体,粗体等) String fontName = ""; //字体名称 try { //取得参数(ParamUtil类请参看后面附的ParamUtil类代码) text = ParamUtil.getParameter(request,"text"); p_w_picpathFile = ParamUtil.getParameter(request,"p_w_picpathFile"); 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(p_w_picpathFile.toLowerCase().endsWith(".jpeg")||p_w_picpathFile.toLowerCase().endsWith(".jpg")) { p_w_picpathFile = getServletContext().getRealPath(p_w_picpathFile); InputStream p_w_picpathIn = new FileInputStream(new File(p_w_picpathFile)); JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(p_w_picpathIn); BufferedImage p_w_picpath = decoder.decodeAsBufferedImage(); Graphics g=p_w_picpath.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(p_w_picpath); p_w_picpathIn.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; } }}///

实际应用

1. 在web.xml中声明该Servlet

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

1. 
   
2. 将net.xdevelop.merge.TextIntoImage类和net.xdevelop.util.ParamUtil类放入WEB-INF/classes/
3. JSP页面调用，本例中要将bg.jpg文件放入根目录，示例代码： <img border="0" src="/TextIntoImage?text=热点聚焦&p_w_picpathFile=/bg.jpg&x=20&y=20&fontColor=FFFFFF&fontStyle=bold&fontName=宋体&fontSize=16">

转载于:https://blog.51cto.com/77857/169307