1.首先,实现图片验证码类,让其继承HttpServlet,并用Graphics画出图片,具体java代码如下:
package com.common.util.AuthImg;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* 产生验证码servlet
*
* @author alon
*
*/
public class AuthImg extends HttpServlet
{
private static final long serialVersionUID = 1L;
private Font mFont = new Font("Arial Black", Font.BOLD, 16);
public void init() throws ServletException
{
super.init();
}
Color getRandColor(int fc, int bc)
{
Random random = new Random();
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
int width = 70, height = 18;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandColor(200, 250));
g.fillRect(1, 1, width - 1, height - 1);
g.setColor(new Color(102, 102, 102));
g.drawRect(0, 0, width - 1, height - 1);
g.setFont(mFont);
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 155; i++)
{
int x = random.nextInt(width - 1);
int y = random.nextInt(height - 1);
int xl = random.nextInt(6) + 1;
int yl = random.nextInt(12) + 1;
g.drawLine(x, y, x + xl, y + yl);
}
for (int i = 0; i < 70; i++)
{
int x = random.nextInt(width - 1);
int y = random.nextInt(height - 1);
int xl = random.nextInt(12) + 1;
int yl = random.nextInt(6) + 1;
g.drawLine(x, y, x - xl, y - yl);
}
String sRand = "";
for (int i = 0; i < 4; i++)
{
String tmp = getRandomChar();
sRand += tmp;
g.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
g.drawString(tmp, 15 * i + 10, 15);
}
HttpSession session = request.getSession(true);
session.setAttribute("rand", sRand);
g.dispose();
ImageIO.write(image, "JPEG", response.getOutputStream());
}
private String getRandomChar()
{
int rand = (int) Math.round(Math.random() * 2);
long itmp = 0;
char ctmp = '\\';
switch (rand)
{
case 1:
itmp = Math.round(Math.random() * 25 + 65);
ctmp = (char) itmp;
return String.valueOf(ctmp);
case 2:
itmp = Math.round(Math.random() * 25 + 97);
ctmp = (char) itmp;
return String.valueOf(ctmp);
default:
itmp = Math.round(Math.random() * 9);
return String.valueOf(itmp);
}
}
}
2.实现该servlet类后,在web.xml配置文件中配置该servlet,具体配置如下:
<!-- 验证码 -->
<servlet>
<servlet-name>img</servlet-name>
<servlet-class>com.common.util.AuthImg</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>img</servlet-name>
<url-pattern>/authImg</url-pattern>
</servlet-mapping>
3.在要显示该验证码的页面,如登录页面,添加以下代码:
验证码:<input name="validateCode" type="text" size="10" maxlength="4" id="typeCode" value=""/>
<a href="javascript:void(0);" title="看不清,点击重新获取" id="getnewCode"> <img border=0 src="<%=basePath%>authImg" id="authImg" /></a>
当访问该页面后,会动态显示生成验证码,效果如下:
为了用户在看不清该验证码的情况下,能通过点击验证码图片重新获取新的验证码,可通过添加以下jquery js脚本实现:
//重新获取验证码
$("#getnewCode").click(function(){
$("#authImg").attr("src","authImg?id="+Math.random());
});