圖形驗證碼實現

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

 

<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="點擊更換" src="../Kaptcha"
                                         onclick="changeVerifyCode(this)"/>
        </div>
    </div>
  </div>
</li>

 

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

 

效果圖：