图片验证码的实现-优快云博客

本文介绍了一种使用Struts2框架实现验证码功能的方法。详细展示了JSP页面布局、JavaScript交互逻辑、Struts2配置文件设置及Java后台代码实现。通过自定义验证码图片生成逻辑，并利用Struts2的拦截器返回图片流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JSP页面：

<tr>
	<td valign="top" class="w1">
		验证码：
	</td>
	<td>
		<img id="validateImage" align="middle" id="validateImage"
			src="imageCode!checkCodeImage.action" width="150" height="40"
			onclick="this.src='imageCode!checkCodeImage.action?time='+(new Date()).getTime();" />
		<s:textfield name="validateCode" id="validateCode"
			onblur="return checkValidateCode()"></s:textfield>
		<div>
			<p class="t1">
				<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
				<a href="javascript:" id="changeImage">看不清，再换一张</a>
			</p>
			<span id="numberInfo" style="color: red"> <s:property
					value="errors['validateCode']" />&nbsp; </span>
		</div>
	</td>
</tr>

2.JS

$(function(){
  	//为验证码看不清链接添加单击切换处理
  	  $("#changeImage").click(function(event){
  	         $("#validateImage").attr("src","imageCode!checkCodeImage.action?time="+new Date().getTime());
  	  		  event.preventDefault();//防止浏览器默认处理href.
  	  });
})

3.struts2配置文件struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="user-package" extends="dang-package" namespace="/user">
		<action name="imageCode" class="XXX.CheckCodeGenerationAction">
			<result name="image" type="stream">
				<param name="inputName">checkCodeStream</param>
			</result>
		</action>
	</package>
</struts>

4.JAVA代码

CheckCodeGenerationAction：
public String checkCodeImage() {
		Map<String, BufferedImage> map = CheckCodeUtil.getCheckCodeImage();
		String code = map.keySet().iterator().next();
		session.put("code", code);
		BufferedImage image = map.get(code);
		checkCodeStream = CheckCodeUtil.parseImage(image);
		return "image";
	}

CheckCodeUtil:
public final class CheckCodeUtil {
	private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
		"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "东",
		"南", "西", "北", "中", "发", "白" };
	private static final int SIZE = 5;
	private static final int LINES = 20;
	private static final int WIDTH = 200;
	private static final int HEIGHT = 100;
	private static final int FONT_SIZE = 60;
	
	public static Map<String, BufferedImage> getCheckCodeImage(){
		StringBuffer sb = new StringBuffer();
		BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
		Graphics g = image.getGraphics();
		//画底色
		g.setColor(Color.LIGHT_GRAY);
		g.fillRect(0, 0, WIDTH, HEIGHT);
		Random random = new Random();
		//画随机字符
		for(int i=1;i<=SIZE;i++){
			int num = random.nextInt(chars.length);
			g.setColor(getRandomColor());
			g.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
			g.drawString(chars[num], (i-1)*WIDTH/SIZE, HEIGHT/2);
			sb.append(chars[num]);
		}
		//画干扰线
		for(int i=0;i<LINES;i++){
			g.setColor(getRandomColor());
			g.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH), random.nextInt(HEIGHT));
		}
		Map<String, BufferedImage> map = new HashMap<String, BufferedImage>();
		map.put(sb.toString(), image);
		return map;
	}
	public static Color getRandomColor() {
		Random ran = new Random();
		Color color = new Color(ran.nextInt(256), ran.nextInt(256), ran
				.nextInt(256));
		return color;
	}
	
	public static InputStream parseImage(BufferedImage image){
		ByteArrayOutputStream out = new ByteArrayOutputStream();
		JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
		try{
			encoder.encode(image);
			ByteArrayInputStream inputStream = new ByteArrayInputStream(out.toByteArray());
			return inputStream;
		}catch(Exception e){
			e.printStackTrace();
			return null;
		}
		
	}
}