HTML 点击图片更换验证码的实现

最新推荐文章于 2022-11-08 16:30:27 发布

深色風信子

最新推荐文章于 2022-11-08 16:30:27 发布

阅读量1w

点赞数 4

分类专栏： Java Web 生成验证码文章标签： Java Web 生成验证码 HTML 图片验证码

本文链接：https://blog.csdn.net/qq_34814092/article/details/79874496

版权

Java 同时被 3 个专栏收录

147 篇文章 13 订阅

订阅专栏

Web

1 篇文章 0 订阅

订阅专栏

生成验证码

1 篇文章 0 订阅

订阅专栏

HTML 点击图片更换验证码的实现


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img style="height: 22px;" id="codeImg" onclick="this.src='verifycode?'+Math.random()" alt="点击更换" title="点击更换" src="verifycode" />
	<!-- οnclick=" this.src='******' " 地址根据自己的实际情况来 -->
</body>
</html>

Servlet 代码

package com.xu.servlet;

import java.io.IOException;
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 com.xu.utils.VerifyCode;

/**
 * Servlet implementation class VerifyCodeServlet
 */
@WebServlet(name = "verifycode", urlPatterns = {"/VerifyCodeServlet", "/verifycode"})
public class VerifyCodeServlet extends HttpServlet {


    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public VerifyCodeServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        VerifyCode code = new VerifyCode();
        code.verifyCode(request, response);
        System.out.println("---->" + request.getSession().getAttribute("VerifyCode"));
    }

}

生成图片验证码

package com.xu.utils;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * 图片验证码
 *
 * @author Administrator
 * @ClassName: VerifyCode
 * @Description: 图片验证码
 * @date 2019年6月23日23:41:21
 */
public class VerifyCode {

    /**
     * 生成图片验证码
     *
     * @param request  HTTP请求对象(request)
     * @param response HTTP响应对象(response)
     * @return void
     * @Title: verifyCode
     * @Description: 生成图片验证码
     * @date 2019年6月23日23:41:21
     */
    public void verifyCode(HttpServletRequest request, HttpServletResponse response) {
        try {
            int width = 140;
            int height = 40;
            Random random = new Random();
            //设置response头信息 禁止浏览器缓存
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            BufferedImage image = new BufferedImage(width, height, 1);// 生成缓冲区image类
            Graphics graphics = (Graphics) image.getGraphics();// 产生image类的Graphics用于绘制操作
            Graphics2D graphics2d = (Graphics2D) graphics;
            graphics.setColor(getRandColor(10, 255));// 图片底色
            graphics2d.setFont(new Font("Times New Roman", 0, 28));
            graphics2d.fillRect(0, 0, width, height);
            int x, y, x1, y1;
            for (int i = 0; i < 60; i++) {// 绘制60条干扰线
                graphics2d.setColor(this.getRandColor(100, 200));
                x = random.nextInt(width);
                y = random.nextInt(height);
                x1 = random.nextInt(30);
                y1 = random.nextInt(30);
                graphics2d.setColor(new Color(20 + random.nextInt(220), 20 + random.nextInt(220), 20 + random.nextInt(220)));
                graphics2d.drawLine(x, y, x + x1, y + y1);
            }
            String verifycode = "";
            int positionx = 0, positiony = 0;
            double rotate = 0;
            String rand = "";
            for (int i = 1; i <= 6; i++) {// 绘制6个验证码
                rand = String.valueOf(random.nextInt(10));// 随机生成纯数字验证码
                verifycode += rand;
                graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));// 随机验证码颜色
                Font font = new Font("宋体", Font.BOLD, 20);// 设置字体
                AffineTransform transform = new AffineTransform();
                graphics2d.setFont(font);
                positionx = 18 * i;// 验证码  X 坐标
                positiony = 25;// 验证码  Y 坐标
                rotate = Math.random() * (Math.random() > 0.5 ? 1 : -1);// 旋转随机度数
                transform.rotate(rotate, positionx, positiony);// 围绕绘制的文字的位置旋转 随机度数
                graphics2d.setTransform(transform);
                graphics2d.drawString(rand, positionx, positiony);// 绘制验证码
            }
            request.getSession().setAttribute("VerifyCode", verifycode);// 把当前的验证码保存到当前的session中用于前端的验证
            graphics.dispose();
            graphics2d.dispose();
            ImageIO.write(image, "JPEG", response.getOutputStream());// 将图片写入响应流中
            response.getOutputStream().flush();// 刷新响应流			
        } catch (Exception e) {
            throw new RuntimeException(e.getMessage());
        }

    }

    /**
     * 生成随机图片底色
     *
     * @param bcolor 起始RGB颜色
     * @param ecolor 结束RGB颜色
     * @return Color
     * @Title: getRandColor
     * @Description: 生成随机图片底色
     * @date 2019年6月23日23:41:21
     */
    private Color getRandColor(int bcolor, int ecolor) {
        Random random = new Random();
        int r = bcolor + random.nextInt(ecolor - bcolor);
        int g = bcolor + random.nextInt(ecolor - bcolor);
        int b = bcolor + random.nextInt(ecolor - bcolor);
        return new Color(r, g, b);
    }

}