怎样通过SpringMVC生成图片验证码?

生成图片验证码

  1. 首先要添加一个jar包。
    “kaptcha-2.3.2.jar”是一个java开源的验证码工具包,kaptcha 是一个非常实用的验证码生成工具。有了它,你可以生成各种样式的验证码,因为它是可配置的。kaptcha工作的原理是调用com.google.code.kaptcha.servlet.KaptchaServlet,生成一个图片。同时将生成的验证码字符串放到 HttpSession中。)
    kaptcha-2.3.2.jar下载
  2. Springmvc-servlet.xml 添加配置,创建验证码bean。
<!-- 配置验证码属性 -->
	 <bean id="config" class="com.google.code.kaptcha.util.Config">
	 	<constructor-arg>
	 		<props>
	 			<prop key="kaptcha.textproducer.char.length">4</prop>
	 			<prop key="kaptcha.image.width">150</prop>
	 			<prop key="kaptcha.image.height"></prop>
	 		</props>
	 	</constructor-arg>
	 </bean>
	 
	 <!-- 生成验证码对象 -->
	 <bean id="producer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
	 	<property name="config" ref="config"></property>
	 </bean>
  1. 创建验证码Controller自动装配验证码对象
@Autowired
	private DangDangUserService userservice;
	//自动装配验证码对象
	@Autowired
	private Producer producer;
//获取验证码
	@RequestMapping("/validateCode")
	public void validateCode(HttpSession session,HttpServletResponse response) {
		//获取验证码字符串
		String kaptcha = producer.createText();
		//保留验证码,存储在session中
		session.setAttribute("kaptcha", kaptcha);
		//把字符串加干扰线装进图片
		BufferedImage image = producer.createImage(kaptcha);
		//然后用流的方式把图片响应给请求端
		try {
			ImageIO.write(image,"jpg",response.getOutputStream());
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
  1. 准备前端页面

全局首次加载验证码

//全局加载
		$(function(){
			//加载验证码
			$("#imgVcode").attr("src","${pageContext.request.contextPath}/user/validateCode.do");
			
		});

刷新加载验证码

<tr>
	<td valign="top" class="w1">验证码:</td>
	<td>
		<img class="yzm_img" id='imgVcode' src="#" /> 
		<input name="code" type="text" id="txtVerifyCode" class="yzm_input" onblur="checkVerifyCode()"/>
		<div class="text_left t1">
			<p class="t1">
				<span id="vcodeValidMsg">请输入图片中的四个字母,不区分大小写。</span> <span
					id="number.info" style="color:red"></span> <a
					href="javascript:void(0)" 
					onclick="document.getElementById('imgVcode').src='${pageContext.request.contextPath}/user/validateCode.do?time='+(new Date()).getTime();">看不清楚?换个图片</a>
			</p>
			<a style="color:red;" id="codeInfo"></a>
		</div>
	</td>
</tr>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值