话不多说,直接上代码
package cn.stormtides.web.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; 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.BufferedReader; 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="ABCDEFGHIJKLMNOPQRSTUVWXYZabcefghijklmnopqrstuvwxyz0123456789"; 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,y1,x2,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> window.onload=function () { var img=document.getElementById("checkCode"); img.onclick=function () { //加时间戳 var date=new Date().getTime(); img.src="/day15/checkCodeServlet?"+date; } } </script> </head> <body> <img id="checkCode" src="/day15/checkCodeServlet" /> <a id="change" href="">看不清换一张?</a> </body> </html>
至于为什么要加时间戳,在打开页面加载图片时会存储图片路径和图片(由数字字母干扰线组成的图片),再当图片刷新时还是会加载该图片,加上一个时间戳会图片路径不会重复,从而加载新的图片,"/day15"为虚拟路径