服务端产生验证码，客户端验证

最新推荐文章于 2019-03-24 14:50:26 发布

在成为巨擘的路上

最新推荐文章于 2019-03-24 14:50:26 发布

阅读量1.3k

点赞数 1

分类专栏： J2EE

本文链接：https://blog.youkuaiyun.com/qq_24065713/article/details/87193811

版权

J2EE 专栏收录该内容

30 篇文章

订阅专栏

图像验证

技术：Random类，GUI技术之图像处理、Servlet类之response对象

package test;

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.util.Random;

@WebServlet(urlPatterns = "/test/ValidateCode")

public class ValidateCode extends HttpServlet {

    private static final String CODES = "qwertyuiolkjhgfdsazxcvbnm1234567890QWERTYUIOPKLJMNHBGVFCDXSZA";

    private static final int WIDTH = 100;

    private static final int HEIGHT = 40;

    private Random random = new Random();

    private static final int CODE_COUNT = 4;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       doGet(request,response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1、生成验证码字符

        //2、生成图片

        BufferedImage bufferedImage = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_BGR);

        Graphics graphics = bufferedImage.getGraphics();

        graphics.fillRect(0, 0, WIDTH, HEIGHT);

        StringBuffer buffer = new StringBuffer();

        Font font = new Font("黑体", Font.BOLD, 25);

        graphics.setFont(font);

        for (int i = 0; i < CODE_COUNT; i++) {

            graphics.setColor(genColor());

            char c = genCode();

            graphics.drawString(c + "", i * 20, 20);

            buffer.append(c);

        }

        int area = (int) (WIDTH * HEIGHT * 0.2);

        for (int i = 0; i < area; i++) {

            graphics.setColor(genColor());

            int x = random.nextInt(WIDTH);

            int y = random.nextInt(HEIGHT);

            bufferedImage.setRGB(x, y, genColor().getRGB());

        }

        for (int i = 0; i < 5; i++) {

            graphics.setColor(genColor());

            graphics.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH), random.nextInt(HEIGHT));

        }

        //3、通过输出流输出

        response.setContentType("image/jpeg");//MIME-TYPE

        ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

        //4、验证码缓存到session中

        request.getSession().setAttribute("realCode", buffer.toString());

        //防止页面缓存

        response.setHeader("pregam", "No-cache");

        response.setHeader("chache-contor", "No-cache");

        response.setDateHeader("expire", 0);

    }

    //随机生成一个字符

    private char genCode() {

        return CODES.charAt(random.nextInt(CODES.length()));

    }

    private Color genColor() {

        return new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256));

    }

}

//============================


<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>验证码</title>

    <style>

        #vcode{

            width: 100px;

            height: 40px;

        }

    </style>

</head>

<body>

<input type="text" name="vcode" id="vcode" placeholder="输入验证码">

<img src="ValidateCode" alt="验证码" id="vcodeImg">

<button>验证</button>



<script>

    $('vocdeImg').addEventListener('click',function () {

        this.src='ValidateCode?r='Math.random();

//防止缓存，否则没有效果

    });

    function $(id) {

        return document.getElementById(id);

    }

</script>



</body>

</html>