首先导入VerifyCode工具类
package cn.web.image;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
public class VerifyCode {
private int w = 70;
private int h = 35;
private Random r = new Random();
// 定义有那些字体
private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
// 定义有那些验证码的随机字符
private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
// 生成背景色
private Color bgColor = new Color(255, 255, 255);
// 用于gettext 方法 获得生成的验证码文本
private String text;
// 生成随机颜色
private Color randomColor() {
int red = r.nextInt(150);
int green = r.nextInt(150);
int blue = r.nextInt(150);
return new Color(red, green, blue);
}
// 生成随机字体
private Font randomFont() {
int index = r.nextInt(fontNames.length);
String fontName = fontNames[index];//生成随机字体名称
int style = r.nextInt(4);//生成随机的样式,0(无样式),1(粗体),2(斜体),3(粗体+斜体),4(随机)
int size = r.nextInt(5) + 24;//生成随机号,24-28
return new Font(fontName, style, size);
}
// 画干扰线
private void drawLine(BufferedImage image) {
int num = 3;//一共画3条线
Graphics2D g2 = (Graphics2D) image.getGraphics();
for (int i = 0; i < num; i++) {//生成两个点的坐标,即4个值
int x1 = r.nextInt(w);
int y1 = r.nextInt(h);
int x2 = r.nextInt(w);
int y2 = r.nextInt(h);
g2.setStroke(new BasicStroke(1.5F));// 不知道
g2.setColor(Color.blue);
g2.drawLine(x1, y1, x2, y2);
}
}
// 得到codes的长度内的随机数 并使用charAt 取得随机数位置上的codes中的字符
private char randomChar() {
int index = r.nextInt(codes.length());
return codes.charAt(index);
}
// 调用这个方法得到验证码
public BufferedImage getImage() {
BufferedImage image = new BufferedImage(w, h,
BufferedImage.TYPE_INT_RGB);//创建图片缓冲区
Graphics2D g2 = (Graphics2D) image.getGraphics();//得到绘制环境
StringBuilder sb = new StringBuilder();//用来装载生成的文本
// 向图中画四个字符
for (int i = 0; i < 4; i++) {//循环四次,每次生成一个字符
String s = randomChar() + "";//随机生成一个字符
sb.append(s);//把字母添加到sb中
float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
g2.setFont(randomFont());//设置随机字体
g2.setColor(randomColor());//设置随机颜色
g2.drawString(s, x, h - 5);//画图
}
this.text = sb.toString();//把生成的字符串赋给了this.text
drawLine(image);//添加干扰线
// 返回图片
return image;
}
// 得到验证码的文本 后面是用来和用户输入的验证码 检测用
public String getText() {
return text;
}
// 定义输出的对象和输出的方向
public static void output(BufferedImage bi, OutputStream fos)
throws FileNotFoundException, IOException {
ImageIO.write(bi, "JPEG", fos);
}
}
编写测试类
[@Test](https://my.oschina.net/azibug)
public void fun2() throws FileNotFoundException, IOException{
VerifyCode vc=new VerifyCode();//获取VerifyCode类
BufferedImage bi=vc.getImage();从vc中获取图片
try {
VerifyCode.output(bi, new FileOutputStream("D:/yyy.jpg"));//输出图片到D:/yyy.jpg
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(vc.getText());//获取图片中的文本
}
效果
接下来要将验证码放入login.jsp中
<font color="red"> <b><%=message%></b></font>
<form action="/day11/LoginServlet" method="post">
<%-- 把cookie中的用户名显示到用户名文本框中--%>
用户名:<input type="text" name="username" value="<%=uname%>"/><br/>
密 码: <input type="password" name="password"/><br/>
验证码: <input type="text" name="verifyCode" size="3"/>
<img id ="img"src="/day11/VerifyCodeServlet">
<a href="javascript:_change()">换一张</a><br/>
<input type="submit" value="登陆"/>
</form>
在login.jsp页面中显示图片,需建立一个VerifyCodeServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*
* 1、生成图片
* 2、保存图片上的文本到session域中
* 3、把图片响应给客户端
* */
VerifyCode vc=new VerifyCode();//new
BufferedImage image=vc.getImage();//1
request.getSession().setAttribute("session_vcode", vc.getText());//保存图片上的文本到session域
VerifyCode.output(image, response.getOutputStream());//3
}
页面提交到loginServlet中,需要校验验证码 1、从session中获取正确的验证码 2、从表单中获取用户填写的验证码 3、进行比较 4、如果相同,向下运行,否则保存错误信息到request域中,转发到login.jsp
代码如下
String sessionCode= (String)request.getSession().getAttribute("session_vcode");//1
String paramCode=request.getParameter("verifyCode");//2
if(!paramCode.equalsIgnoreCase(sessionCode)){//3
request.setAttribute("msg", "验证码错误");//4
request.getRequestDispatcher("/session2/login.jsp").forward(request, response);//4
return;//为了不往下执行,返回
效果
“换一张”实现 添加超链接
<a href="javascript:_change()">换一张</a>
编写javascript
<script type="text/javascript">
function _change(){
/*
1、得到img元素
2.修改其为/day11/VerifyCodeServlet
*/
var imgEle=document.getElementById("img");//找到img的id
imgEle.src="/day11/VerifyCodeServlet?=a"+new Date().getTime();//过一段时间刷新
}
</script>