java图形验证码实现

前言

本文首发于公众号【我的小碗汤】本公众号免费提供csdn下载服务，海量IT学习资源，如果你准备入IT坑，励志成为优秀的程序猿，那么这些资源很适合你，包括但不限于java、go、python、springcloud、elk、嵌入式、大数据、面试资料、前端等资源。扫码关注：

正文

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

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

效果图：

最后，csdn资源，收集了海量学习资料，如果你准备入IT坑，励志成为优秀的程序猿，那么这些资源很适合你，包括java、go、python、springcloud、elk、嵌入式、大数据、面试资料、前端等资源。同时我们组建了一个技术交流群，里面有很多大佬，会不定时分享技术文章，如果你想来一起学习提高，可以关注以下公众号后回复【2】，获取。

我是小碗汤，我们一起学习，扫码关注，精彩内容第一时间推给你

巴特西

java图形验证码实现

前言

正文

最新文章

热门文章