java繪製圖片驗證碼（看不清，換一張）
阿新 • • 發佈：2018-12-30
現在正式開發中圖片驗證碼好像已經很少用了，但是為了加深個人印象，做個小筆記。
驗證碼實現分析
- 在用java生成一張固定尺寸的圖片，會用到api是BufferedImage(int width,int height,int type);
- 給圖片上繪製出隨機的文字、字母或者數字，用到API是Graphics2D（繪製文字）和Random（生成隨機數）
- 繪製隨機的干擾線用到Api為graphics2d.drawLine(x1, y1, x2, y2);
- 將圖片展示到瀏覽器上用到Api為 ImageIO
生成圖片的具體java程式碼如下
/**
* @author 在具體用的時候直接
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String code=VerificationCodeUtils.drawVerificationCode(resp,160,40,4);
System.out.println("code="+code);
}這裡我打印出了隨機生成的驗證碼，實際開發中可以把這個存到資料庫來跟客戶端提交的驗證碼進行比對驗證。
實現”看不清，換一張“
這裡可以用js或者ajax實習非同步區域性重新整理，具體如下
js實現如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>驗證碼</title>
</head>
<body>
<form action="/MyWebTest/login" method="post">
<img id="_img" alt="" src="/MyWebTest/verifyCode">
<a href="#" onclick="changeCode();">看不清，換一張</a><br/>
</form>
<script type="text/javascript">
function changeCode(){
var img=document.getElementById("_img");
img.src="/MyWebTest/verifyCode?"+new Date().getTime();
}
</script>
</body>
</html>Jquery方式實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>驗證碼</title>
</head>
<body>
<form action="/MyWebTest/login" method="post">
<img id="_img" alt="" src="/MyWebTest/verifyCode">
<a href="#">看不清，換一張</a><br/>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function() {
var src= $("#_img").attr("src","/MyWebTest/verifyCode?"+new Date().getTime());
});
});
</script>
</body>
</html>注意：
- a標籤中的href屬性值用”#“號佔位，如果用”javascript：void(0)“的話會出現IO異常。
- 給”/MyWebTest/verifyCode”後面拼接new Date().getTime())引數是為了防止瀏覽器快取導致驗證碼不重新整理;
- 用jQuery的時候匯入對應的js庫檔案
<script type="text/javascript" src="http://xxxx/jquery-3.2.1.min.js"></script>總結
學一點，總結一點，每天提升一點。