package com.project.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 验证码
* Servlet implementation class CheckCodeServlet
*/
@WebServlet("/checkCode")
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CheckCodeServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应信息的MIME类型为jpeg图片
response.setContentType("image/jpeg");
//创建130*53的内存图片
BufferedImage img = new BufferedImage(130,53,BufferedImage.TYPE_INT_RGB);
//得到画笔
Graphics g = img.getGraphics();
//随机产生背景颜色
g.setColor(new Color((int)(Math.random()*50+175),(int)(Math.random()*50+175),(int)(Math.random()*50+175)));
//绘制实心矩形
g.fillRect(0, 0, 130, 53);
//设置字体格式
g.setFont(new Font("宋体",Font.BOLD,30));
//设置字体颜色
g.setColor(new Color((int)(Math.random()*70+50),(int)(Math.random()*70+50),(int)(Math.random()*70+50)));
for (int i=0; i<4; i++){
//随机产生大写字母(A-Z)
char c = (char) (Math.random()*26+65);
//向图片写入文字，x每次增加12pix,y每次随机变化（22-52）pix
g.drawString(c+"",24*i+12,(int)(Math.random()*30+22));
//g.drawString(c+"",(int)(Math.random()*117+22),(int)(Math.random()*30+22));
}
//将img随机产生的图片，以二进制方式输出到客户端
ImageIO.write(img, "jpeg", response.getOutputStream());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<script type="text/javascript" src="/testweb/jquery-1.12.1.js"></script>
<script type="text/javascript">
function imgChange(){
//"/testweb/checkCode?a="+Math.random()清除浏览器缓存
//随机从服务器产生随机数，不会从缓存中去取
//浏览器存在缓存，当客户端浏览器向服务器发送请求时，会将下载的内容在浏览器缓存起来
//如果客户端再次请求服务器的同一个页面，会先看浏览器缓存中是否有下载的资源，
//如果有，会从浏览器缓存中获取资源如果没有，再从服务器下载
$("#codeImg").attr("src","/testweb/checkCode?a="+Math.random());
}
$(function(){
$("#clc").click(function(){
$("#codeImg").attr("src","/testweb/checkCode?a="+Math.random());
})
});
</script>
</head>
<body>
<form action="login" method="post">
用户名：<input type="text" name="userName"><br/>
密码：<input type="password" name="pwd"><br/>
<img alt="" src="/testweb/checkCode" id="codeImg">
<input type="button" id="clc" value="点击切换验证码"><br/>
<a href="javascript:imgChange()">看不清楚，换一张</a><br/>
验证码：<input type="text" name="check">
</form>
</body>
</html>
