最近在用ssm框架做一个管理系统,做到登录验证时,使用了下面的代码生成图片验证码,最终的效果如下图。
Java类
[AppleScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
public class RandomValidateCode {
public static final String RANDOMCODEKEY = "randomcode_key" ; / / 放到session中的 key
private Random random = new Random ( ) ;
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" ; / / 随机产生的字符串
private int width = 80 ; / / 图片宽
private int height = 26 ; / / 图片高
private int lineSize = 40 ; / / 干扰线数量
private int stringNum = 4 ; / / 随机产生字符数量
/ * *
* 生成随机图片
* /
public void getRandcode ( HttpServletRequest request ,
HttpServletResponse response ) {
HttpSession session = request.getSession ( ) ;
/ / BufferedImage类是具有缓冲区的Image类 , Image类是用于描述图像信息的类
BufferedImage image = new BufferedImage ( width , height , BufferedImage.TYPE_INT_BGR ) ;
/ / 产生Image对象的Graphics对象 , 改对象可以在图像上进行各种绘制操作
Graphics g = image .getGraphics ( ) ;
g.fillRect ( 0 , 0 , width , height ) ;
g.setFont ( new Font ( "Times New Roman" , Font.ROMAN_BASELINE , 18 ) ) ;
g.setColor ( getRandColor ( 160 , 200 ) ) ;
/ / 绘制干扰线
for ( int i = 0 ;i < = lineSize;i + + ) {
drowLine ( g ) ;
}
/ / 绘制随机字符
String randomString = "" ;
for ( int i = 1 ;i < = stringNum;i + + ) {
randomString = drowString ( g , randomString , i ) ;
}
session.removeAttribute ( RANDOMCODEKEY ) ;
session.setAttribute ( RANDOMCODEKEY , randomString ) ;
g.dispose ( ) ;
try {
/ / 将内存中的图片通过流动形式输出到客户端
ImageIO. write ( image , "JPEG" , response.getOutputStream ( ) ) ;
} catch ( Exception e ) {
e.printStackTrace ( ) ;
}
}
/ *
* 获得字体
* /
private Font getFont ( ) {
return new Font ( "Fixedsys" , Font.CENTER_BASELINE , 18 ) ;
}
/ *
* 获得颜色
* /
private Color getRandColor ( int fc , int bc ) {
if ( fc > 255 )
fc = 255 ;
if ( bc > 255 )
bc = 255 ;
int r = fc + random.nextInt ( bc - fc -16 ) ;
int g = fc + random.nextInt ( bc - fc -14 ) ;
int b = fc + random.nextInt ( bc - fc -18 ) ;
return new Color ( r , g , b ) ;
}
/ *
* 绘制字符串
* /
private String drowString ( Graphics g , String randomString , int i ) {
g.setFont ( getFont ( ) ) ;
g.setColor ( new Color ( random.nextInt ( 101 ) , random.nextInt ( 111 ) , random.nextInt ( 121 ) ) ) ;
String rand = String.valueOf ( getRandomString ( random.nextInt ( randString.length ( ) ) ) ) ;
randomString + = rand;
g.translate ( random.nextInt ( 3 ) , random.nextInt ( 3 ) ) ;
g.drawString ( rand , 13 * i , 16 ) ;
return randomString;
}
/ *
* 绘制干扰线
* /
private void drowLine ( Graphics g ) {
int x = random.nextInt ( width ) ;
int y = random.nextInt ( height ) ;
int xl = random.nextInt ( 13 ) ;
int yl = random.nextInt ( 15 ) ;
g.drawLine ( x , y , x + xl , y + yl ) ;
}
/ *
* 获取随机的字符
* /
public String getRandomString ( int num ) {
return String.valueOf ( randString.charAt ( num ) ) ;
}
}
|
Controller
[AppleScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
@RequestMapping ( value = "/checkCode" )
public void checkCode ( HttpServletRequest request , HttpServletResponse response )
throws ServletException , IOException {
/ / 设置相应类型 , 告诉浏览器输出的内容为图片
response.setContentType ( "image/jpeg" ) ;
/ / 设置响应头信息,告诉浏览器不要缓存此内容
response.setHeader ( "pragma" , "no-cache" ) ;
response.setHeader ( "Cache-Control" , "no-cache" ) ;
response.setDateHeader ( "Expire" , 0 ) ;
RandomValidateCode randomValidateCode = new RandomValidateCode ( ) ;
try {
randomValidateCode.getRandcode ( request , response ) ; / / 输出图片方法
} catch ( Exception e ) {
e.printStackTrace ( ) ;
}
}
|
前端jsp页面表单,显示验证码
[HTML] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
|
< div class = "layui-form-item" >
< div class = "layui-row" >
< div class = "layui-col-xs7" >
< label class = "layadmin-user-login-icon layui-icon layui-icon-vercode" for = "LAY-user-login-vercode" ></ label >
< input type = "text" name = "code" id = "LAY-user-login-vercode" lay-verify = "required" placeholder = "图形验证码" class = "layui-input" >
</ div >
< div class = "layui-col-xs5" >
< div style = "margin-left: 10px;" >
< img src = "${pageContext.request.contextPath}checkCode" class = "layadmin-user-login-codeimg" id = "LAY-user-get-vercode" alt = "" >
</ div >
</ div >
</ div >
</ div >
|
|
|