服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

servlet实现动态图文结合输出

内容:
先看看我们要解决的问题
html如何显示一张图片
通过servlet实现图文结合输出
实际应用
继续完善
附录
参考资料
关于作者
相关内容:
tcp/ip 介绍
tcp/ip 介绍
!== end toc -->

黄林榕(starboy@xdevelop.net)
深圳颖源科技
2001 年 11 月

构建动态网站,灵活性与美观经常会成为一个矛盾。网页设计师从视觉角度考虑,在许多地方采用了图片,有时甚至在动态输出的内容上使用了图片,比如网站的栏目、各类标题等。而这些内容往往要经常变换,需要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;    }  }}///////////


实际应用

  1. 在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>


  2. 将net.xdevelop.merge.textintoimage类和net.xdevelop.util.paramutil类放入web-inf/classes/
  3. 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文件支持等。

附录
演示程序(demo.zip)

参考文献

  • 2d graphics and imaging of jfc in the jdk(tm)sdk documentation


关于作者
黄林榕,深圳颖源科技高级程序员,经济学学士。一年的j2ee开发经验,是企商平台可视化建站系统的主要设计与开发者,对java及其可复用组件的开发有着浓厚兴趣,您可以在xdevelop.net网站上获得他最新开发的部分组件

 

扫描关注微信公众号