web页面 验证码 生成
生活随笔
收集整理的這篇文章主要介紹了
web页面 验证码 生成
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
web頁面 驗證碼 生成
?
kaptcha 是一個非常實用的驗證碼生成工具。有了它，你可以生成各種樣式的驗證碼，因為它是可配置的。kaptcha工作的原理是調用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一個圖片。同時將生成的驗證碼字符串放到 HttpSession中。
使用kaptcha可以方便的配置：
?
- 驗證碼的字體
- 驗證碼字體的大小
- 驗證碼字體的字體顏色
- 驗證碼內容的范圍(數字，字母，中文漢字！)
- 驗證碼圖片的大小，邊框，邊框粗細，邊框顏色
- 驗證碼的干擾線(可以自己繼承com.google.code.kaptcha.NoiseProducer寫一個自定義的干擾線)
- 驗證碼的樣式(魚眼樣式、3D、普通模糊……當然也可以繼承com.google.code.kaptcha.GimpyEngine自定義樣式)
?
……
詳細信息請看下面的web.xml文件
下面介紹一下用法:
1.首先去官網下載jar:http://code.google.com/p/kaptcha/
2.建立一個web項目，導入kaptcha-2.3.jar到環境變量中。
3.配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"version="2.4"><servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class><!--For a complete list of Init Parameters, please see:http://code.google.com/p/kaptcha/wiki/ConfigParameters--><init-param><param-name>kaptcha.border</param-name><param-value>no</param-value></init-param><init-param><param-name>kaptcha.textproducer.font.color</param-name><param-value>black</param-value></init-param><init-param><param-name>kaptcha.textproducer.char.space</param-name><param-value>5</param-value></init-param></servlet><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha.jpg</url-pattern></servlet-mapping><welcome-file-list><welcome-file>KaptchaExample.jsp</welcome-file></welcome-file-list> </web-app>4.jsp頁面
KaptchaExample.jsp：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><%@ page language="java" contentType="text/html; charset=UTF-8" %><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Kaptcha Example</title></head><script type="text/javascript"> $(function() { $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));}); }); </script> <body>Enter in the <a href="http://code.google.com/p/kaptcha/">Kaptcha</a> to see if it matches what is stored in the session attributes.<table><tr><td><img src="Kaptcha.jpg" id="kaptchaImage" ></td><td valign="top"><form method="POST"><br>sec code:<input type="text" name="kaptchafield"><br /><input type="submit" name="submit"></form></td></tr></table> <br /><br /><br /><br /><%String c = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);String parm = (String) request.getParameter("kaptchafield");out.println("Parameter: " + parm + " ? Session Key: " + c + " : ");if (c != null && parm != null) {if (c.equals(parm)) {out.println("<b>true</b>");} else {out.println("<b>false</b>");}}%></body> </html>上面的配置在普通jsp環境下面是有效的，如果在spring mvc環境下，則取不到session值，對于sping mvc環境驗證碼配置如下：
１.不用在web.xml進行相關配置，在applicationContext.xml中配置
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"><property name="config"><bean class="com.google.code.kaptcha.util.Config"><constructor-arg><props><prop key="kaptcha.border">no</prop><prop key="kaptcha.border.color">105,179,90</prop><prop key="kaptcha.textproducer.font.color">red</prop><prop key="kaptcha.image.width">250</prop><prop key="kaptcha.textproducer.font.size">90</prop><prop key="kaptcha.image.height">90</prop><prop key="kaptcha.session.key">code</prop><prop key="kaptcha.textproducer.char.length">4</prop><prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop></props></constructor-arg></bean></property></bean>2.新建生成圖片控制類
package com.google.code.kaptcha;import java.awt.image.BufferedImage;import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.core.Constants; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;@Controller @RequestMapping("/") public class CaptchaImageCreateController { private Producer captchaProducer = null; @Autowired public void setCaptchaProducer(Producer captchaProducer) { this.captchaProducer = captchaProducer; } @RequestMapping("/captcha-image") public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception { // Set to expire far in the past.response.setDateHeader("Expires", 0);// Set standard HTTP/1.1 no-cache headers. response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); // Set IE extended HTTP/1.1 no-cache headers (use addHeader). response.addHeader("Cache-Control", "post-check=0, pre-check=0"); // Set standard HTTP/1.0 no-cache header. response.setHeader("Pragma", "no-cache"); // return a jpeg response.setContentType("image/jpeg"); // create the text for the image String capText = captchaProducer.createText(); // store the text in the session request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); // create the image with the text BufferedImage bi = captchaProducer.createImage(capText); ServletOutputStream out = response.getOutputStream(); // write the data out ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } return null; } }?3.前臺調用方式
<div class="chknumber"> <label>驗證碼： <input name="kaptcha" type="text" id="kaptcha" maxlength="4" class="chknumber_input" /> </label> <img src="/ClinicCountManager/captcha-image.do" width="55" height="20" id="kaptchaImage" style="margin-bottom: -3px"/> <script type="text/javascript"> $(function(){ $('#kaptchaImage').click(function () {//生成驗證碼 $(this).hide().attr('src', '/ClinicCountManager/captcha-image.do?' + Math.floor(Math.random()*100) ).fadeIn(); }) }); </script> </div>4.取驗證碼的方式
String code = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);?
啦啦啦
kaptcha.border 是否有邊框 默認為true 我們可以自己設置yes，no kaptcha.border.color 邊框顏色 默認為Color.BLACK kaptcha.border.thickness 邊框粗細度 默認為1 kaptcha.producer.impl 驗證碼生成器 默認為DefaultKaptcha kaptcha.textproducer.impl 驗證碼文本生成器 默認為DefaultTextCreator kaptcha.textproducer.char.string 驗證碼文本字符內容范圍 默認為abcde2345678gfynmnpwx kaptcha.textproducer.char.length 驗證碼文本字符長度 默認為5 kaptcha.textproducer.font.names 驗證碼文本字體樣式 默認為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize) kaptcha.textproducer.font.size 驗證碼文本字符大小 默認為40 kaptcha.textproducer.font.color 驗證碼文本字符顏色 默認為Color.BLACK kaptcha.textproducer.char.space 驗證碼文本字符間距 默認為2 kaptcha.noise.impl 驗證碼噪點生成對象 默認為DefaultNoise kaptcha.noise.color 驗證碼噪點顏色 默認為Color.BLACK kaptcha.obscurificator.impl 驗證碼樣式引擎 默認為WaterRipple kaptcha.word.impl 驗證碼文本字符渲染 默認為DefaultWordRenderer kaptcha.background.impl 驗證碼背景生成器 默認為DefaultBackground kaptcha.background.clear.from 驗證碼背景顏色漸進 默認為Color.LIGHT_GRAY kaptcha.background.clear.to 驗證碼背景顏色漸進 默認為Color.WHITE kaptcha.image.width 驗證碼圖片寬度 默認為200 kaptcha.image.height 驗證碼圖片高度 默認為50 1.導入kaptcha9.jar 2.<bean id="captcha" class="com.google.code.kaptcha.servlet.KaptchaExtend"><constructor-arg><props> <!-- 是否有邊框 邊框顏色 邊框粗細 --><prop key="kaptcha.border">yes</prop> <prop key="kaptcha.border.color">105,179,90</prop> <prop key="kaptcha.border.thickness">20</prop><prop key="kaptcha.textproducer.font.color">black</prop> <prop key="kaptcha.image.width">200</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.textproducer.font.size">40</prop> <!-- 驗證碼在session中存儲時的key：session.setAttribute("xxx",xxxx); --><prop key="kaptcha.session.key">code</prop> <prop key="kaptcha.textproducer.char.length">4</prop> <prop key="kaptcha.textproducer.font.names">Arial,Courier</prop> <prop key="kaptcha.background.clear.from">black</prop> <prop key="kaptcha.background.clear.to">255,0,0</prop> </props> </constructor-arg></bean> 3. @...public class XXController{//在Controller中注入驗證碼生成器 @Autowiredprivate KaptchaExtend ke;@RequestMapping("/kap2")public String kaptcha2(HttpServletRequest req,HttpServletResponse resp,HttpSession s){try {ke.captcha(req, resp);//生成驗證碼，并寫出驗證碼圖片System.out.println("code:"+s.getAttribute("code"));}return null;}} *需要jdk7啦啦啦
總結
以上是生活随笔為你收集整理的web页面 验证码 生成的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmd 一键获取 所有连接过的wifi
- 下一篇： 转载 HTTPS 之fiddler抓包、