java图形验证码实现

比眉伴天荒 2022-01-07 07:19 369阅读 0赞

## 正文 ##

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

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

在web.xml中配置名为Kaptcha的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>
    
    <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>

效果图：

## ![在这里插入图片描述][20191019195837280.png] ##

# 作者简洁 #

> 作者：小碗汤，一位热爱、认真写作的小伙，目前维护原创公众号：『我的小碗汤』，专注于写golang、docker、kubernetes等知识等提升硬实力的文章，期待你的关注。 转载说明：务必注明来源（注明：来源于公众号：我的小碗汤， 作者：小碗汤）

[20191019195837280.png]: /images/20211227/aa437d99ea884b529c1928adc15e7568.png