package servlet; 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("/checkCodeServlet") public class CheckCodeServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int width=100; int height=50; //创建一对象,在内存中图片(验证码图片对象) BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //美化图片 //填充背景色 Graphics g=image.getGraphics();//画笔对象 g.setColor(Color.pink);//设置画笔颜色 g.fillRect(0,0,width,height); //画边框 g.setColor(Color.blue); g.drawRect(0,0,width-1,height-1); String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; //生成随机角标 Random ran=new Random(); for (int i = 1; i <=4 ; i++) { int index = ran.nextInt(str.length()); //获取字符 char ch = str.charAt(index); //写验证码 g.drawString(ch+"",width/5*i,height/2); } //画干扰线 g.setColor(Color.green); for (int i = 0; i <10 ; i++) { //随机生成坐标点 int x1 = ran.nextInt(width); int x2 = ran.nextInt(width); int y1 = ran.nextInt(height); int y2 = ran.nextInt(height); g.drawLine(x1,x2,y1,y2); } //将图片输出到页面显示 ImageIO.write(image,"jpg",response.getOutputStream()); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 点击超链接或图片，需要换一张 * 给超链接和图片绑定单击事件 * 重新设置图片的src属性值 */ window.onload=function () { //获取图片对象 let img = document.getElementById("checkCode"); //绑定单击事件 img.onclick=function () { /** * 因为浏览器会有默认缓存，如果路径不变，只会访问缓存，所以加date改变参数，保证每次都不同 * @type {number} */ //加时间戳 let date=new Date().getTime(); img.src="/day13_response/checkCodeServlet?"+date; } } </script> </head> <body> <img id="checkCode" src="/day13_response/checkCodeServlet"/> </body> </html>