一:问题
javaWeb如何实现图形验证码:首先感谢 梦蓝樱飞 https://blog.csdn.net/menglanyingfei/article/details/79101580
二:工具
Intellij Idea
三:原理
① 设置响应的文档类型;
② 生成随机码;
③ 把随机码保存到session中;
④ 生成图片;
⑤ 把随机码画到内存图片上;
⑥ 把内存图片发送到客户端
四:效果图
五:代码
1):VerifyCode.java 位于实体层,
import java.util.Random;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import javax.imageio.ImageIO;
public class VerifyCode {
private int w = 70;
private int h = 35;
private Random r = new Random();
// {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
//可选字符
private String codes = "0123456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
//背景色
private Color bgColor = new Color(255, 255, 255);
// 验证码上的文本
private String text;
// 生成随机的颜色
private Color randomColor() {
int red = r.nextInt(150);//生成0-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];
//生成随机的样式, 0(无样式), 1(粗体), 2(斜体), 3(粗体+斜体)
int style = r.nextInt(4);
//生成随机字号, 24 ~ 28
int size = r.nextInt(5) + 24;
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);//画线
}
}
// 随机生成一个字符
private char randomChar() {
int index = r.nextInt(codes.length());
return codes.charAt(index);
}
// 创建BufferedImage
private BufferedImage createImage() {
BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = (Graphics2D) image.getGraphics();
g2.setColor(this.bgColor);
g2.fillRect(0, 0, w, h);
return image;
}
// 调用这个方法得到验证码
public BufferedImage getImage() {
//创建图片缓冲区
BufferedImage image = createImage();
//得到绘制环境
Graphics2D g2 = (Graphics2D) image.getGraphics();
//用来装载生成的验证码文本
StringBuilder sb = new StringBuilder();
// 向图片中画4个字符
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 image, OutputStream out) throws IOException {
ImageIO.write(image, "JPEG", out);
}
}
2):VerifyCodeServlet.java 位于servlet层
import com.krt.entity.VerifyCode;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
@WebServlet(name = "VerifyCodeServlet", value = "/VerifyCodeServlet")//注解
public class VerifyCodeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws IOException {
// 创建对象
VerifyCode vc = new VerifyCode();
//获取图片对象
BufferedImage bi = vc.getImage();
// 获得图片的文本内容
String text = vc.getText();
// 将系统生成的文本内容保存到session中
req.getSession().setAttribute("text", text);
// 向浏览器输出图片
vc.output(bi, resp.getOutputStream());
}
}
3):login.jsp form表单及script
<form action="login" method="post" class="form_lay">
<div class="form_tit">
<img src="skin/images/form_icon_03.png" class="dq"/>
<span class="form_tittext fyh">用户登录 LOGIN</span>
</div>
<div class="hr-20"></div>
<div class="text_layout">
<input type="hidden" name="opre" value="login">
<label class="text_lab fyh right_4" for="username">用户名:</label>
<input type="text" class="form_text fyh" id="username" name="userName" placeholder="输入用户名"/>
</div>
<div class="text_layout">
<label class="text_lab fyh right_6" for="password">密 码:</label>
<input type="password" class="form_text fyh" name="userPwd" id="password" placeholder="输入密码"/>
</div>
<div class="text_layout">
<label class="text_lab fyh right_4" for="yzm">验证码:</label>
<input type="text" class="form_text1 fyh" id="yzm" name="yzm" placeholder="验证码"/>
<img src="/Krt/VerifyCodeServlet">
<%--<span class="show fyh">SFRW</span>--%>
<em class="change_yzm fyh" id="btn">看不清,换一个</em>
</div>
<div class="hr-30"></div>
<input type="submit" value="登 录" class="button fyh"/>
</form>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
// 获取img元素
// 为了让浏览器发送请求到servlet, 所以一定要改变src
document.getElementsByTagName("img")[1].src =
"/Krt/VerifyCodeServlet?time=" + new Date().getTime();
};
</script>