制作一个简单的 登录验证码生成

package group9.util;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;

import org.springframework.stereotype.Component;

/*
 * 
 * 验证码生产工具类
 * 
 * 
 * */
@Component
public class ValCode {
//----------------------------------------1.创建验证码图片的基本属性--------------------------------
	
	//验证码图片区域宽度
	private int width = 160;
	//验证码图片区域的高度
	private int height= 40;
	//验证码的字符个数
	private int codeCount = 4;
	//验证码中的干扰线条数
	private int lineCount = 150;
	// 验证码字符串
	private String code = null;
	
	//图片对象  BufferedImage 用于操作图片
	private BufferedImage buffImg = null; 
	
	//验证码的范围，即出现的字母或者数字
	private char[] codeSequence= {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',  
            'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',  
            'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9'};

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}
	
	
	
//--------------------------------------2.生成验证码的方法---------------------------------------
	public void creatCode() {
		//声明画图需要的变量
		int x = 0; //水平间距
		int red = 0,green=0,blue=0; //设置颜色变量
		
		//设置字符间距 防止验证码重叠
		x = width/(codeCount + 2);  //30
		
		//创建一个设置rgb 颜色图片的对象  前面两个属性设置像素 即宽* 高 最后一个属性设置颜射模式 设置为rgb
		buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		
		//创建一个画2D 图对象，用来画验证码图的工具盒理解为画笔  createGraphics() 获取对象啊
		Graphics2D graphics2d = buffImg.createGraphics();
		
		//进行画图操作
		graphics2d.setColor(Color.GRAY); //设置画笔颜色 灰色
		//画一个矩形
		graphics2d.fillRect(0, 0, width, height); //0，0参数是 起始坐标X，Y 后面是宽和高
	
	
//-------------------------------------3.画干扰线的方法----------------------------------------------
		//创建随机数对象
		Random random = new Random();
		//用循环来生成干扰线 
		for (int i = 0; i < lineCount; i++) {//生成随机干扰线 范围不超过宽高
			int xs = random.nextInt(width); //设置x,y坐标的起始位置
			int ys = random.nextInt(height);
			int xe = random.nextInt(width/8);//设置x,y坐标的结束位置除 8  是为了防止起始与结束重合 才能生成线
			int ye = random.nextInt(height/8);
			
			//生产随机颜色值，让输出的每个干扰的颜色值都将不同 。 
			red = random.nextInt(255); //将颜色变量设置为随机数并按照255最大值随机取值
			green = random.nextInt(255);
			blue = random.nextInt(255);
			
			//设置干扰线的颜色
			graphics2d.setColor(new Color(red,green,blue)); 
			//画出干扰线 根据设定的坐标值进行
			graphics2d.drawLine(xs, ys, xe, ye);
		}
		
//-------------------------------------4.画验证码字符----------------------------------------------------------------------------
		//创建字体对象 三个参数分别是字体，字体风格，字体大小
		Font font = new Font("Courier", Font.PLAIN, 38);
		graphics2d.setFont(font); //将画笔的字体设置为创建的字体
		
		//创建StringBuffer 用来装未来生成的验证码字符串
		StringBuffer randomCode = new StringBuffer();
		
		//同样使用循环来生成随机验证码
		for (int i = 0; i < codeCount; i++) { 
			//               表示从 验证码范围的字符数组中  随机取出一个字符  长度不超过字符数组长度
			String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
			
			//下面步骤与绘制干扰线类似 设置字符颜色随机
			red = random.nextInt(255);
			green = random.nextInt(255);
			blue = random.nextInt(255);
			//设置字符颜色 随机值
			graphics2d.setColor(new Color(red,green,blue));
			//画出字符 三个参数分别是：要画的字，字的x坐标,y坐标
			graphics2d.drawString(strRand, (i+1) * x, height-4); // x,y轴的公式
			//将生成的字符 组合在一起
			randomCode.append(strRand);
		}
		System.out.println("生成的验证码是:" + randomCode);
		// 将验证码赋值给属性code
		code = randomCode.toString();
	}
	
//--------------------------------------5.生成图片--------------------------------------------------------------------
	public void write(OutputStream os) throws IOException { //将上面生成的验证码图片写出去
		//将buffImg生成png格式的图片，OutputStream是输出对象方式
		ImageIO.write(buffImg, "png", os);  
		
		os.close();
	}
}

2.Controller层获取验证码

//验证码生成
	@RequestMapping(value = "valCode.do",method = RequestMethod.GET)
	public void valCode(HttpServletRequest request,HttpServletResponse response) {
		//设置图片格式 响应给客户端的格式
		response.setContentType("image/png");
		//开始生成验证码 调用验证码工具类
		valCode.creatCode();
		//获取验证码值
		String code = valCode.getCode();
		
		HttpSession session = request.getSession();
		session.setAttribute("valCode", code);
		try {
			//生成验证码 写到客户端
			valCode.write(response.getOutputStream());
		} catch (IOException e) {
			System.out.println("验证码出现异常");
			e.printStackTrace();
		}
	}

3.前端请求验证码

<div>
<img src="images/pwd.png" width="20" height="20" style="position: relative; top: 5px;" />
<label >验证码:&nbsp;</label>
<input type="text" id="valCode" class="wu-text" style="width:160px" placeholder="请输入验证码" > 
<br>
<br>
<img id="vimg" src="valCode.do" width="90" height="30" onclick="resh()">
</div>	

     
//验证码刷新		
function resh(){
//获取现在时间的原始值
var timestamp = (new Date()).valueOf();
console.log(timestamp)
//取出原src  attr返回图片的值
var url = $("#vimg").attr("src");
//在原src后面拼接时间戳
url = url + "?timestamp=" + timestamp;
//将改变的后的url赋值给src
$("#vimg").attr("src", url);
}