| |
如果你是一个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="http://www.itus.cn/textintoimage?text=热点聚焦&imagefile=/bg.jpg&x=20&y=20&fontcolor=ffffff&fontstyle=bold&fontname=宋体&fontsize=16">
继续完善
到此可以暂告一个段落了。不过还有很多地方有待继续完善，例如：加入文字效果处理（阴影、立体、浮雕等），文字竖排，增加对gif文件支持等。
|
|
