图片验证码的实现

1、引入依赖

<!-- 验证码 -->
<dependency>
    <groupId>com.github.axet</groupId>
    <artifactId>kaptcha</artifactId>
    <version>0.0.9</version>
</dependency>

2、编写配置文件分 java 和 xml 两种

java配置方式：

/**
 * 图片验证码的配置
 */
@Configuration
public class KaptcharConfig {

    @Bean
    public DefaultKaptcha captchaProducer(){
        DefaultKaptcha kaptcha = new DefaultKaptcha();

        Properties properties = new Properties();
        //是否有边框
        properties.setProperty("kaptcha.border","yes");
        //设置边框颜色
        properties.setProperty("kaptcha.border.color","105,179,90");
        //验证码文本字符颜色 默认为Color.BLACK
        properties.setProperty("kaptcha.textproducer.font.color","red");
        //验证码
        properties.setProperty("kaptcha.session.key","code");
        //设置字体样式
        properties.setProperty("kaptcha.textproducer.font.names","Times New Roman");
        //边框粗细度 默认为1
        properties.setProperty("kaptcha.border.thickness","");
        //验证码生成器 默认为DefaultKaptcha
        properties.setProperty("kaptcha.producer.impl","");
        //验证码文本生成器 默认为DefaultTextCreator
        properties.setProperty("kaptcha.textproducer.impl","");
        //验证码文本字符内容范围 默认为abcde2345678gfynmnpwx
        properties.setProperty("kaptcha.textproducer.char.string","");
        //验证码文本字符长度 默认为5
        properties.setProperty("kaptcha.textproducer.char.length","4");
        //验证码文本字符大小 默认为40
        properties.setProperty("kaptcha.textproducer.font.size","40");
        //验证码文本字符间距 默认为2
        properties.setProperty("kaptcha.textproducer.char.space","6");
        //验证码图片宽度 默认为200
        properties.setProperty("kaptcha.image.width","200");
        //验证码图片高度 默认为40
        properties.setProperty("kaptcha.image.height","50");

        Config config = new Config(properties);
        kaptcha.setConfig(config);
        return kaptcha;
    }
}

xml配置方式：

<!--图片验证码的配置-->
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
    <property name="config">
        <bean class="com.google.code.kaptcha.util.Config">
            <constructor-arg>
                <props>
                    <prop key="kaptcha.border">yes</prop><!--是否有边框 -->
                    <prop key="kaptcha.border.color">105,179,90</prop><!--设置边框颜色 -->
                    <prop key="kaptcha.textproducer.font.color">red</prop><!--验证码文本字符颜色 默认为Color.BLACK -->
                    <prop key="kaptcha.session.key">code</prop><!--验证码 -->
                    <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop><!--设置字体样式 -->
                    <prop key="kaptcha.border.thickness"></prop><!--边框粗细度 默认为1 -->
                    <prop key="kaptcha.producer.impl"></prop><!--验证码生成器 默认为DefaultKaptcha -->
                    <prop key="kaptcha.textproducer.impl"></prop><!-- 验证码文本生成器 默认为DefaultTextCreator -->
                    <prop key="kaptcha.textproducer.char.string"></prop><!--验证码文本字符内容范围 默认为abcde2345678gfynmnpwx -->
                    <prop key="kaptcha.textproducer.char.length">4</prop><!-- 验证码文本字符长度 默认为5 -->
                    <prop key="kaptcha.textproducer.font.size">50</prop><!--验证码文本字符大小 默认为40 -->
                    <prop key="kaptcha.textproducer.char.space">6</prop>    <!--验证码文本字符间距 默认为2 -->
                    <prop key="kaptcha.image.width">200</prop>    <!--验证码图片宽度 默认为200 -->
                    <prop key="kaptcha.image.height">60</prop> <!--验证码图片高度 默认为40 -->
                </props>
            </constructor-arg>
        </bean>
    </property>
</bean>

3、编写 controller类

@Controller
@RequestMapping("kaptcha")
public class KaptchaController extends BaseController {

    @Autowired
    private Producer captchaProducer;

    @RequestMapping("getKaptchaImage")
    public void search(HttpServletRequest request, HttpServletResponse response) throws IOException {

        response.setDateHeader("Expires", 0);

        // Set standard HTTP/1.1 no-cache headers.
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        // Set standard HTTP/1.0 no-cache header.
        response.setHeader("Pragma", "no-cache");
        // return a jpeg
        response.setContentType("image/jpeg");
        // create the text for the image
        // 随机生成文字
        String capText = captchaProducer.createText();
        // store the text in the session
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        // create the image with the text
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        // write the data out
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }

    }
}

4、在前端页面调用

<tr height="25px">
    <td width="60px" style="font-size: 13px;">验&nbsp;证&nbsp;码</td>
    <td><input type="text" maxlength="4" id="randomcodeId"
               style="width:90px;height: 25px;border:1px solid gray;padding-left: 2px;padding-top: 2px;"
               onblur="checkRandomCode();inputBlur(this);" onfocus="inputFocus(this);"/>
        <img alt="换一个" name="randImage" id="randImage" src="${request.contextPath}/getVerify"
             onclick="document.getElementById('randImage').src='${request.contextPath}/getVerify?'+Math.random()"
             align="top" width="80" height="25" title="看不清，换一张">
        <input type="hidden" id="randField"/>
    </td>
</tr>

图片验证码的实现

猜你喜欢