构建动态网站,灵活性与美观经常会成为一个矛盾。网页设计师从视觉角度考虑,在许多地方采用了 图片,有时甚至在动态输出的内容上使用了图片,比如网站的栏目、各类标题等。而这些内容往往 要经 常变换,需要WEB页面的脚本程序根据数据库中的内容实时输出。传统使用图片的形式显然无法胜任需要 经常变换内容的位置 ,通常是采用折衷的办法,或降低对视觉效果的要求,让设计师改用文字设计,或 要求维护人员不时根据实际内容重新制作并更换图片,等等。对此,本文将 提供一种更为灵活的解决方 案。
如果你是一个WEB开发者,或多或少会遇到这样一种情况:网页设计师在设计网页时,在需要动态输出 内容的地方采用图片,如:
而”热点聚焦”这个名称,也许过一两天就要求改成”焦点访谈”等其它字样,到时不得不重新制作一张 图片替代。而采用文字加背景,有时不易达到好的效果。采用表格背景图方式,需要精心调整表格的尺寸 ,而且其它的改动也会有意无意影响到它,需要小心调试。
本人在多个项目开发中遇到网页中需要动态图文结合输出情况,程序员和美工往往最终都是选择了回 避和妥协,尽管通常影响不大,但毕竟与尽善尽美的追求有所差距。于是终于产生了本文的解决方法。
先看看我们要解决的问题
我们的问题可以简单总结为:有一张图片,如:
现在我们要动态地将文字比如”热点聚焦”输出到上面,并在网页上得到类似如下的显示:
HTML如何显示一张图片
在HMTL中显示一张图片很简单:。
另外我们还知道src属性中的文件类型并没有做限定,也就是说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 utput=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 textintoimage net.xdevelop.merge.TextIntoImage textintoimage /TextIntoImage
将net.xdevelop.merge.TextIntoImage类和net.xdevelop.util.ParamUtil类放入WEB- INF/classes/
JSP页面调用,本例中要将bg.jpg文件放入根目录,示例代码:
继续完善
到此可以暂告一个段落了。不过还有很多地方有待继续完善,例如:加入文字效果处理(阴影、立体 、浮雕等),文字竖排,增加对GIF文件支持等。
本文配套源码
躲在某一地点,想念一个站在来路,