前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >图形验证码实现

图形验证码实现

作者头像
我的小碗汤
发布2018-08-22 10:43:37
1.6K0
发布2018-08-22 10:43:37
举报
文章被收录于专栏:我的小碗汤

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

代码语言:javascript
复制
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

在web.xml中配置名为Kaptcha的servlet:

代码语言:javascript
复制
<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事件:

代码语言: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>
代码语言:javascript
复制
<script type="text/javascript">
        function changeVerifyCode(img) {
            // alert("asssssssssss");
            img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
        };
</script>

效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-07-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 进击云原生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档