java圖形驗證碼實現

今天來學習下圖形驗證碼的生成，首先依賴開源元件：

<dependency>
   <groupId>com.github.penggle</groupId>
   <artifactId>kaptcha</artifactId>
   <version>2.3.2</version></dependency>

在web.xml中配置名為Kaptcha的servlet：

<servlet>
 <!-- 生成圖片的Servlet -->
 <servlet-name>Kaptcha</servlet-name>
 <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>

 <!-- 是否有邊框 -->
 <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>red</param-value>
 </init-param>
 <!-- 圖片寬度 -->
 <init-param>
   <param-name>kaptcha.image.width</param-name>
   <param-value>135</param-value>
 </init-param>
 <!-- 使用哪些字元生成驗證碼 -->
 <init-param>
   <param-name>kaptcha.textproducer.char.string</param-name>
   <param-value>ACDEFHKPRSTWX345679</param-value>
 </init-param>
 <!-- 圖片高度 -->
 <init-param>
   <param-name>kaptcha.image.height</param-name>
   <param-value>50</param-value>
 </init-param>
 <!-- 字型大小 -->
 <init-param>
   <param-name>kaptcha.textproducer.font.size</param-name>
   <param-value>43</param-value>
 </init-param>
 <!-- 干擾線的顏色 -->
 <init-param>
   <param-name>kaptcha.noise.color</param-name>
   <param-value>black</param-value>
 </init-param>
 <!-- 字元個數 -->
 <init-param>
   <param-name>kaptcha.textproducer.char.length</param-name>
   <param-value>4</param-value>
 </init-param>
 <!-- 使用哪些字型 -->
 <init-param>
   <param-name>kaptcha.textproducer.font.names</param-name>
   <param-value>Arial</param-value>
 </init-param></servlet><!-- 對映的url --><servlet-mapping>
 <servlet-name>Kaptcha</servlet-name>
 <url-pattern>/Kaptcha</url-pattern></servlet-mapping>

html中新增驗證碼標籤，並繫結javascript事件：

<!--驗證碼--><li class="align-top">
 <div class="item-content">
   <div class="item-inner">
     <div class="item-title label">驗證碼</div>
     <input type="text" id="j_captcha" placeholder="驗證碼">
       <div class="item-input">
         <img id="captcha_img" alt="點選更換" title="點選更換" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../Kaptcha"
                                        ="changeVerifyCode(this)"/>
       </div>
   </div>
 </div></li>

<script type="text/javascript">
       function changeVerifyCode(img) {           // alert("asssssssssss");
           img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
       };</script>

效果圖：

作者：我的小碗湯
連結：