JAVA图片验证码的创建与使用教程

前言：验证码常用于注册或登录等常见功能当中，这样做的目的是为了防止恶意登录或者恶意的批量注册等。验证码是必须传到服务端校验的。

DEMO1 创建一个图片写入文字并输出

写一个ImageCodeServlet

public class ImageCodeServlet extends HttpServlet {

public void service (HttpServletRequest request, HttpServletResponse response) throws IOException{
/**
*      验证码功能
* 第一步： 动态创建一个图片
* 第二步： 在图片上画字符
* 第三步： 将图片上文字保存到session里面，将来校验时，和session里面的数据比对
* 第四步： 将图片以字节输出流的形式response输出
*/

// 第一步: 动态创建一个图片  指定 (宽,高,颜色格式) 宽高单位px
BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_BGR);

// 第二步: 在图片上画字符
//二 1、创建一个字符串
String str = "Hello World";
//二 2、 创建画笔
Graphics graphic = image.getGraphics();
//二 3、利用画笔将字符串写到图片上   (字符串,放置的横坐标,放置的纵坐标)
graphic.drawString(str, 20, 10);

// 第三步 : 将图片上文字保存到session
request.getSession().setAttribute("code", str);

// 第四步：将图片利用response输出  (图片,图片格式,字节输出流)
ImageIO.write(image, "jpeg", response.getOutputStream());

}

}

编写web.xml配置

<servlet>
<servlet-name>imageCodeServlet</servlet-name>
<servlet-class>
com.vc.servlet.ImageCodeServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>imageCodeServlet</servlet-name>
<url-pattern>/image.do</url-pattern>
</servlet-mapping>

DEMO2 建立随机数组，获取随机验证码，设置字符颜色为随机

public class ImageCodeServlet extends HttpServlet {

// 创建一个字符数组
private char[] chars = {'A','B','C','D','E','F','G',
'H','I','J','K','M','L','N',
'O','P','Q','R','S','T',
'U','V','W','X','Y','Z',
'1','2','3','4','5','6','7','8','9','0'};

public void service (HttpServletRequest request, HttpServletResponse response) throws IOException{

// 第一步: 动态创建一个图片  指定 (宽,高,颜色格式) 宽高单位px
BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_BGR);
//创建画笔
Graphics graphic = image.getGraphics();
//设置图片背景颜色 为黄色
graphic.setColor(Color.YELLOW);
//画一个矩形 设置 坐标点 宽高
graphic.fillRect(0, 0, 100, 30);

// 第二步: 在图片上画字符
//二 1、创建一个字符串
String str = "";
// 随机抽取字符
for(int i=0;i<5;i++){
Random ran = new Random();
int index = ran.nextInt(chars.length);
str += chars[index];
//生成一个随机的Color RGB模式
Color color = new Color(
ran.nextInt(255),ran.nextInt(255),ran.nextInt(255));
graphic.setColor(color);
//利用画笔将字符串写到图片上   (字符串,放置的横坐标,放置的纵坐标)
graphic.drawString(chars[index]+"", 30+i*10, 20);
}

// 第三步 : 将图片上文字保存到session
request.getSession().setAttribute("code", str);

// 第四步：将图片利用response输出  (图片,图片格式,字节输出流)
ImageIO.write(image, "jpeg", response.getOutputStream());

}

DEMO3 增加验证码的干扰线

public class ImageCodeServlet extends HttpServlet {

// 创建一个字符数组
private char[] chars = {'A','B','C','D','E','F','G',
'H','I','J','K','M','L','N',
'O','P','Q','R','S','T',
'U','V','W','X','Y','Z',
'1','2','3','4','5','6','7','8','9','0'};

public void service (HttpServletRequest request, HttpServletResponse response) throws IOException{

// 第一步: 动态创建一个图片  指定 (宽,高,颜色格式) 宽高单位px
BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_BGR);
//创建画笔
Graphics graphic = image.getGraphics();
//设置图片背景颜色 为黄色
graphic.setColor(Color.YELLOW);
//画一个矩形 设置 坐标点 宽高
graphic.fillRect(0, 0, 100, 30);

// 第二步: 在图片上画字符
//二 1、创建一个字符串
String str = "";
Random ran = new Random();
// 随机抽取字符
for(int i=0;i<5;i++){
int index = ran.nextInt(chars.length);
str += chars[index];
//生成一个随机的Color RGB模式
Color color = new Color(
ran.nextInt(255),ran.nextInt(255),ran.nextInt(255));
graphic.setColor(color);
//利用画笔将字符串写到图片上   (字符串,放置的横坐标,放置的纵坐标)
graphic.drawString(chars[index]+"", 30+i*10, 20);
}

// 第三步 : 将图片上文字保存到session
request.getSession().setAttribute("code", str);

/**    增加干扰线        */
for(int i=0;i<5;i++){
/** 随机设置干扰线的颜色 */
Color color = new Color(                    ran.nextInt(255),ran.nextInt(255),ran.nextInt(255));
graphic.setColor(color);
// 设置干扰线
graphic.drawLine(ran.nextInt(100),ran.nextInt(30),ran.nextInt(100),ran.nextInt(30));
}

// 第四步：将图片利用response输出  (图片,图片格式,字节输出流)
ImageIO.write(image, "jpeg", response.getOutputStream());

}

}

校验验证码的servlet

CheckCodeServlet

public class CheckCodeServlet extends HttpServlet {

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接收请求code参数
String code = request.getParameter("code");
//获取session中验证码信息
String s_code = (String) request.getSession().getAttribute("code");
/** 比对输出结果 */
// 输出中文
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if(code.equals(s_code)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
out.close();
}

}

web.xml配置文件

<!-- 校验验证码图片 -->
<servlet>
<servlet-name>checkCodeServlet</servlet-name>
<servlet-class>
com.vc.servlet.CheckCodeServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkCodeServlet</servlet-name>
<url-pattern>/checkcode.do</url-pattern>
</servlet-mapping>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function flushImage(){
// 给连接后面增加一串随机数 避免缓存带来的影响
$("#code").attr("src","image.do?r="+Math.random());
};

function checkCode(){
//获取用户输入的验证码信息
var code = $("#txt_code").val().trim();
if(code==''){
$("#s_code").html("不能为空");
return;
}
//发送ajax检查正确性
$.ajax({
url:"checkcode.do",
type:"post",
data:{"code":code},
dataType:"text",
success:function(data){
//data是服务器返回的消息
$("#s_code").html(data);
}
});
};
</script>
</head>
<body>
用户名: <input type="text" id="txt_username" name="username"><br/>
密码: <input type="text" id="txt_password" name="password"><br/>
验证码: <input type="text" id="txt_code" name="code" size="5" onblur="checkCode()">
<img id="code" alt="验证码" src="image.do">
<a href="javascript:flushImage();">看不清?</a>
<span id="s_code"></span><br/>
<input type="button" value="登录•">
</body>
</html>