java - 点击图片进行验证码的切换案例的实现.

最新推荐文章于 2024-05-31 14:02:53 发布

Xiao·Jian

最新推荐文章于 2024-05-31 14:02:53 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_42986107/article/details/83016747

版权

CodeServlte.java - - 绘制验证码图片和随机号码.

@WebServlet("/code")
public class CodeServlet extends HttpServlet {

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

		// 使用java图形界面技术绘制一张图片

		int charNum = 4;
		int width = 20 * 4;
		int height = 28;

		// 1. 创建一张内存图片
		BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

		// 2.获得绘图对象
		Graphics graphics = bufferedImage.getGraphics();

		// 3、绘制背景颜色
		graphics.setColor(Color.YELLOW);
		graphics.fillRect(0, 0, width, height);

		// 4、绘制图片边框
		graphics.setColor(Color.GRAY);
		graphics.drawRect(0, 0, width - 1, height - 1);

		// 5、输出验证码内容
		graphics.setColor(Color.RED);
		graphics.setFont(new Font("宋体", Font.BOLD, 22));
		
		// 随机输出4个字符
		String s = "ABCDEFGHGKLMNPQRSTUVWXYZ23456789";
		Random random = new Random();
		
		// session中要用到
		String msg = "";
		
		int x = 5;
		for (int i = 0; i < charNum; i++) {
			int index = random.nextInt(32);
			String content = String.valueOf(s.charAt(index));
			
			msg += content;
			graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
			graphics.drawString(content, x, 22);
			x += 20;
		}

		// 6、绘制干扰线
		graphics.setColor(Color.GRAY);
		for (int i = 0; i < 5; i++) {
			int x1 = random.nextInt(width);
			int x2 = random.nextInt(width);

			int y1 = random.nextInt(height);
			int y2 = random.nextInt(height);
			graphics.drawLine(x1, y1, x2, y2);
		}

		// 释放资源
		graphics.dispose();

		// 图片输出 ImageIO 装裱
		ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}

}

登录页面: login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="#" method="post">
            用名名:<input type="text" name="username" placeholder="请输入用户名"><br/>
            密码尔:<input type="password" class="form-control" name="password" placeholder="请输入密码"><br/>
            验证码:<input type="text" class="form-control" placeholder="请输入验证码">
            <img id="img" src="http://localhost/code"/><br />
            <input type="submit" value="登录" />
        </form>
    </div>

    <script type="text/javascript">
        // 通过id获取属性值.
        var img = document.getElementById("img");
        // 当图片被点击的时候 , 进行图片的切换.
        img.onclick = function () {
            // 设置src属性为验证码路径.
            // 因为路径一样 , 所以设置一个参数变得不一样.
            img.src = "http://localhost/code?sss="+new Date().getTime();
        }
    </script>

</body>
</html>

Xiao·Jian

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
java - 点击图片进行验证码的切换案例的实现.

CodeServlte.java &nbsp;&nbsp;&nbsp;- - &nbsp;&nbsp;&nbsp;绘制验证码图片和随机号码.@WebServlet("/code")public class CodeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServlet...
复制链接

扫一扫