我是一個從汽車行業轉行IT的項目經理，我是Edward，如想了解更多，請關注我的公衆號【轉行項目經理的逆襲之路】。今天讓我們來看看如何用java實現驗證碼圖片生成，以及點擊重載的功能。
驗證碼圖片的生成：
1、構造靜態字符串，用於隨機生成驗證碼，用StringBuilder就OK了
2、用到了java自帶的awt包，使用畫布畫筆以及各種隨機顏色將隨機生成的code畫上去，同時隨機畫上干擾線。
3、用ImageIO將圖像寫出到字節流裏，用byte數組獲取數據通過socket的輸出流直接寫到頁面上。
package com.webserver.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import com.webserver.http.HttpRequest;
import com.webserver.http.HttpResponse;
public class CreateRandomImageServlet extends HttpServlet{
//構造靜態字符串，用於隨機生成驗證碼
private static String content;
private static String code;
static {
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 26; i++) {
sb.append((char)('a'+i));
sb.append((char)('A'+i));
}
for (int i = 0; i < 10; i++) {
sb.append(i);
}
content = sb.toString();
}
@Override
public void service(HttpRequest request, HttpResponse response) {
//畫布
BufferedImage image = new BufferedImage(70, 30, BufferedImage.TYPE_INT_RGB);
//畫筆
Graphics g = image.getGraphics();
//定義背景顏色
Color bgColor = new Color(200, 200, 255);
//畫筆蘸色
g.setColor(bgColor);
//填充畫布
g.fillRect(0, 0, 70, 30);
//隨機生成字符並畫上
Random random = new Random();
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) {
int d= random.nextInt(content.length());
Color color = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256));
g.setColor(color);
g.setFont(new Font("微軟雅黑", Font.BOLD, 20));
char c = content.charAt(d);
g.drawString(c+"",i*15+5 , 18);
sb.append(c);
}
code = sb.toString();
System.out.println("code:"+code);
//隨機生成干擾線並畫上
for (int i = 0; i < 5; i++) {
Color color = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256));
g.setColor(color);
//線的起始終止座標
g.drawLine(random.nextInt(71),random.nextInt(31) ,random.nextInt(71), random.nextInt(31));
}
ByteArrayOutputStream out = new ByteArrayOutputStream();
try {
ImageIO.write(image, "jpg", out);
byte[]data=out.toByteArray();
response.setData(data); //CH結合ServerContext分析需求，就直接out.write（）寫給你
response.putHeader("Content-Type", "image/jpeg");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static String getCode() {
return code;
}
}
點擊重載
驗證碼是有了，可是有時候不太清楚，想換一張怎麼辦？ 有個可以只刷新驗證碼圖片的方法，即給圖片加上onclick的JS函數。圖片地址不變，頁面不加載怎麼辦？ 加個Math.random就搞定！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
body>div {
margin-top: 50px;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome Back~</h1>
<div class="container">
<form action="./login" method="get" class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="username" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><img onclick="changeCode()" id="img" src="./createRandomImage" ></label>
<div class="col-sm-10">
<input type="text" name="code" class="form-control" id="inputPassword3" placeholder="VerificationCode">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" id="" name="" class="btn btn-default" value="Login"/>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<script type="text/javascript">
function changeCode(){
//src裏面的問號不能掉 document.getElementById("img")可以簡化
img.src="./createRandomImage?"+Math.random();
}
</script>
</html>
注意：src後面的鏈接要換成你自己的業務端口，我這個端口的業務的邏輯是會寫入xml文件，通過靜態塊反射得到servlet對象再執行業務的。