【實例】驗證碼 · JavaWeb學習

VerifyCodeServlet.java ~~~ package zyw.servlet; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; 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(name = "VerifyCodeServlet", urlPatterns = "/code") public class VerifyCodeServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int width=100; int height=30; String data="qwertyuiopasdfghjklzxcvbnm1234567890"; Random random=new Random(); // BufferedImage生成圖片參數1-寬，參數2-高，參數3-類型 BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); Graphics graphics = image.getGraphics();//獲取圖片的繪圖對象 graphics.setColor(Color.gray);//設置對象的顏色為灰色 graphics.fillRect(0, 0, width, height); //ImageIO這個類把圖片輸出給瀏覽器，write()把圖片轉成outputstream類型輸出 //參數2-圖片格式化的類型 //參數3-格式化的輸出流 graphics.setColor(Color.black); for (int i = 0; i < 4; i++) { int position = random.nextInt(data.length());//隨機生成位置 String randomStr = data.substring(position, position + 1);//取出位置對應的字符 graphics.drawString(randomStr, width / 5 * (i + 1), 15); } //ImageIO.write(image,"jpg",response.getOutputStream()); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response.getOutputStream()); encoder.encode(image); } } ~~~ verifyCode.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <center> <h2>切換驗證碼</h2> <script> function changeImageCode() { document.getElementById('btn').isDisabled=true; document.getElementById('identity').src='code?ts='+new Date().getTime(); } </script> <image src="code" id="identity" onload="btn.disable=false;" style="cursor:pointer; vertical-align:middle"> </image> <input type="button" value="看不清，更換驗證碼" onclick="changeImageCode()" id="btn" style="vertical-align:middle"> </center> </html> ~~~ ![](https://box.kancloud.cn/6401ad92a9f0295c8c5eba6534804854_1075x202.png)