java生成 图片验证码

转载:http://blog.csdn.net/u010648555/article/details/52261050


Spring整合生成图片验证码。

前端代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/tag/tag.jsp" %>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${pageTitle}——Powered by TaoJie</title>
    
	<link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap.min.css">
	<link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap-theme.min.css">
	<link href="http://blog.java1234.com/favicon.ico" rel="SHORTCUT ICON">
	<link rel="stylesheet" href="${ctx}/static/css/login.css">
	<script src="${ctx}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
	<script src="${ctx}/static/bootstrap3/js/bootstrap.min.js"></script>
	
	<!-- 验证码 验证脚本 -->
	<script type="text/javascript">
		$(document).ready(function() {
			flushValidateCode();	//进入页面就刷新生成验证码
		});
		
		
		/* 刷新生成验证码 */
		function flushValidateCode() {
			var validateImagObject = document.getElementById("codeValidateImg");
			validateImagObject.src = "${ctx}/getLoginImageCode?time=" + new Date();//向服务器请求验证码
		}
		
		
		/* 校验验证码输入的是否正确 */
		/* 参数code是输入的验证码的值 */
		function checkImg(code) {
			var url = "${ctx}/checkImgCode";
			/* Ajax */
			$.get(url, {"validateCode":code}, function(data) {
				if(data == "ok") {
					$('#validate_info').attr('class', 'glyphicon glyphicon-ok');
					document.getElementById('loginForm').onsubmit = function() {return true;};//表单提交
				} else {
					$('#validate_info').attr('class', 'glyphicon glyphicon-remove');
					flushValidateCode();//刷新验证码
					document.getElementById('loginForm').onsubmit = function() {return false;};//禁止表单提交
				}
			});
		}	
	</script>	
	
  </head>
  
  <body>
  	<div class="login_back">
	  	<!-- 登录表单 -->
		<div class="login">
			<div class="model_ct">
				<div class="model_header">
					<h3>用户登录</h3>
					<span class="msg">${msg }</span>
				</div>
				<div class="model_form">
					<form:form id="loginForm" action="${ctx }/user/login" method="post" commandName="loginForm">
						<div class="txt-fld">
							<label for="userName">用户名</label> 
							<input type="text" id="userName" name="userName" />
						</div>
						<div class="txt-fld">
							<label for="password">密码</label> 
							<input type="password" id="password" name="password" />
						</div>
						<div class="txt-fld">
							<label for="validateCode">验证码</label> 							
							<input type="text" id="validateCode" class="float_lf lf_20" name="validateCode" 
									maxlength="4" οnblur="checkImg(this.value)" style="width:70px;" />
							<img id="codeValidateImg" class="float_lf codeValidateImg" />
							<a class="float_lf kan" href="javascript:flushValidateCode();">看不清</a>	
							<span id="validate_info"></span>	
						</div>
						<div class="btn-fld">
							<button class="submit" id="btnLogin">登 录 »</button>
						</div>	
					</form:form>
					
					<p><a class="float_lf" href="${ctx }/index">返回主页</a>还没有账号? <a href="${ctx }/user/register">点击注册</a></p>
				</div>
			</div>
		</div>	
  	</div>
  	
  </body>
</html>


前端代码主要需要两部分:(1)验证码显示和填写的区域(2)刷新和验证的javascript脚本


后端生成验证码的工具类:

package com.tao.myBlogV3.core.util;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * 生成验证码的工具类
 * @author Tao
 *
 */
public class RandomValidateCode {
	
	private Random random = new Random();
	private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机生成字符串的取值范围
	
	private int width = 80;		//图片宽度
	private int height = 26;	//图片高度
	private int StringNum = 4;	//验证码图片中随机产生字符的数量
	private int lineSize = 40;	//干扰线数量
	
	/**
	 * 获取随机字符,并返回字符的String格式
	 * @param index (指定位置)
	 * @return
	 */
	public String getRandomChar(int index) {
		//获取指定位置index的字符,并转换成字符串表示形式
		return String.valueOf(randString.charAt(index));
	}
	
	/**
	 * 获得字体
	 * @return
	 */
	private Font getFont() {
		return new Font("Fixedsys", Font.CENTER_BASELINE, 18);	//名称、样式、磅值
	}
	
	/**
	 * 获得颜色
	 * @param fc
	 * @param bc
	 * @return
	 */
	private Color getRandColor(int frontColor, int backColor) {
		if(frontColor > 255)
			frontColor = 255;
		if(backColor > 255)
			backColor = 255;
		
		int red = frontColor + random.nextInt(backColor - frontColor - 16);
		int green = frontColor + random.nextInt(backColor - frontColor -14);
		int blue = frontColor + random.nextInt(backColor - frontColor -18);
		return new Color(red, green, blue);
	}
	
	/**
	 * 绘制字符串,返回绘制的字符串
	 * @param g
	 * @param randomString
	 * @param i
	 * @return
	 */
	private String drawString(Graphics g, String randomString, int i) {
		g.setFont(getFont());	//设置字体
		g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));//设置颜色
		String randChar = String.valueOf(getRandomChar(random.nextInt(randString.length())));
		randomString += randChar;	//组装
		g.translate(random.nextInt(3), random.nextInt(3));
		g.drawString(randChar, 13*i, 16);
		return randomString;
	}
	
	/**
	 * 绘制干扰线
	 * @param g
	 */
	private void drawLine(Graphics g) {
		//起点(x,y)  偏移量x1、y1
		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);
	}
	
	/**
	 * 生成随机图片
	 * @param request
	 * @param response
	 * @param key
	 */
	public void getRandomCode(HttpServletRequest request, HttpServletResponse response, String key) {
		
		// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
		Graphics g = image.getGraphics();// 获得BufferedImage对象的Graphics对象
		g.fillRect(0, 0, width, height);//填充矩形
		g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//设置字体
		g.setColor(getRandColor(110, 133));//设置颜色
		//绘制干扰线
		for(int i = 0; i <= lineSize; i++) {
			drawLine(g);
		}
		//绘制字符
		String randomString = "";
		for(int i = 1; i <= StringNum; i++) {
			randomString = drawString(g, randomString, i);
		}
		
		//将生成的验证码放入session
		String sessionId = request.getSession().getId();//获取session的id
		request.getSession().setAttribute(sessionId+key, randomString);
		System.out.println("生成的验证码为:" + randomString);
		
		g.dispose();//释放绘图资源
		try {
			ByteArrayOutputStream tmp = new ByteArrayOutputStream();
			ImageIO.write(image, "png", tmp);//将会值得图片输出到流
			tmp.close();
			Integer contentLength = tmp.size();//内容长度
			response.setHeader("content-length", contentLength+"");
			response.getOutputStream().write(tmp.toByteArray());//通过response输出图片
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				response.getOutputStream().flush();
				response.getOutputStream().close();
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}	
	}
	
}


后端负责验证码请求处理的Controller:

package com.tao.myBlogV3.web.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.tao.myBlogV3.core.util.RandomValidateCode;
import com.tao.myBlogV3.core.util.StringUtil;

/**
 * 负责生成图片的控制器
 * @author Tao
 *
 */
@Controller
@RequestMapping(value="/")
public class ImageGenerateController {
	
	/* 验证码管理 */
	
	//刷新(向服务器请求)生成验证码
	@RequestMapping(value="/getLoginImageCode")
	@ResponseBody
	public String getLoginImageCode(HttpServletRequest request, HttpServletResponse response) {
		
		response.setContentType("image/jpeg");//设置响应类型,告知浏览器输出的是图片
		response.setHeader("Pragma", "No-cache");//设置响应头信息,告诉浏览器不要缓存此内容
		response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Set-Cookie", "name=value; HttpOnly");//设置HttpOnly属性,防止Xss攻击
        response.setDateHeader("Expire", 0);
        RandomValidateCode randomValidateCode = new RandomValidateCode();
        try {
        	randomValidateCode.getRandomCode(request, response, "imageCode");//生成图片并通过response输出
		} catch (Exception e) {
			e.printStackTrace();
		}
        return "";
	}

	/**
	 * 验证码  验证
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping(value="/checkImgCode")
	@ResponseBody
	public String checkImgCode(HttpServletRequest request, HttpServletResponse response) {
		
		//1:获取用户输入的验证码(字符串)
		String inputValidateCode = request.getParameter("validateCode");
		//2:获取用户session中存储的本次生成的验证码信息(字符串)
		String sessionId = request.getSession().getId();
		String validateCode = (String) request.getSession().getAttribute(sessionId+"imageCode");
		//3:判断验证码是否输入的正确
		if(!StringUtil.isBlank(inputValidateCode) && inputValidateCode.equalsIgnoreCase(validateCode)) {
			//非空并且匹配上了
			return "ok";
		} else {
			return "error";
		}	
	}
	
}

主要使用的是Ajax请求。

还有一个生成验证码的工具 google开源工具 Kaptcha,有空的时候好好研究研究......



  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值