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

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



<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
	<img style="height: 22px;" id="codeImg" onclick="this.src='verifycode?'+Math.random()" alt="点击更换" title="点击更换" src="verifycode" />
	
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;


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

	/**
	 * 生成图片验证码
	 * @Title: verifyCode
	 * @Description: 生成图片验证码
	 * @param request HTTP请求对象(request)
	 * @param response HTTP响应对象(response)
	 * @return void 
	 * @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());
		} 

	}

	/**
	 * 生成随机图片底色
	 * @Title: getRandColor
	 * @Description: 生成随机图片底色
	 * @param bcolor 起始RGB颜色
	 * @param ecolor 结束RGB颜色
	 * @return Color 
	 * @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);
	}

}



效果
HTML 点击图片更换验证码的实现_第1张图片

你可能感兴趣的:(Java,Web,生成验证码)