图形验证码实现

时间:2022-06-07
本文章向大家介绍图形验证码实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天来学习下图形验证码的生成,首先依赖开源组件:

<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>

效果图: