java web笔记——随机图片验证码实现看不清换一张

来源：互联网发布：linux 软件安装方式编辑：程序博客网时间：2024/06/05 14:21

Servlet和JS实现的随机验证码图片，并且点击换一张不会刷新清空已填写的内容。
这里写图片描述

Servlet类代码：

package myweb;import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class ResponseDemo4 */public class ResponseDemo4 extends HttpServlet {    private static final long serialVersionUID = 1L;    private static final int WIDTH = 150;    private static final int HEIGHT = 25;    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        BufferedImage image = new BufferedImage(WIDTH, HEIGHT,BufferedImage.TYPE_INT_RGB );        Graphics g = image.getGraphics();        setBackgroud(g);        setBorder(g);        setRandomLine(g);        setRandomDataChinese(g);        response.setHeader("Expires", "-1");        response.setHeader("Cache-Control", "no-cache");        response.setHeader("Pragma", "no-cache");        response.setContentType("image/jpeg");        ImageIO.write(image, "jpg", response.getOutputStream());    }    private void setRandomDataChinese(Graphics g) {        g.setColor(Color.ORANGE);        g.setFont(new Font("宋体",Font.BOLD,16));        String base = "\u7684\u4e00\u662f\u4e86\u6211\u5782\u4ed6\u5927\u5730\u5230\u548c\u751f\u591a\u5fc3\u4ee5\u5b66\u4e48\u770b\u9053\u73b0\u4f46\u524d\u6b21\u8f66\u65b0\u5c06\u5e76\u6bd4";        StringBuffer s = new StringBuffer();        for(int i=0;i<5;i++) {            int num = new Random().nextInt(base.length());            s.append(base.charAt(num) + " "); //charAt(index) 返回指定索引处的char值         }        g.drawString(s.toString(), 10, 20);    }    private void setRandomLine(Graphics g) {        // TODO Auto-generated method stub        g.setColor(Color.ORANGE);        for(int i=0;i<10;i++) {            int x1 = new Random().nextInt(WIDTH);            int y1 = new Random().nextInt(HEIGHT);            int x2 = new Random().nextInt(WIDTH);            int y2 = new Random().nextInt(HEIGHT);            g.drawLine(x1, y1, x2, y2);        }    }    private void setBackgroud(Graphics g) {        // TODO Auto-generated method stub        g.setColor(Color.WHITE);        g.fillRect(0, 0, WIDTH, HEIGHT);    }    private void setBorder(Graphics g) {        // TODO Auto-generated method stub        g.setColor(Color.RED);        g.drawRect(1, 1, WIDTH-2, HEIGHT-2);        //x,y,x+width(1+WIDTH-2=WIDTH-1),y+height(1+HEIGHT-2=HEIGHT-1),边框画在image图片的边界不会显示    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

js代码：

<!DOCTYPE html><html>  <head>    <title>MyHtml.html</title>    <meta charset="UTF-8">    <meta name="keywords" content="keyword1,keyword2,keyword3">    <meta name="description" content="this is my page">    <meta name="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script>        window.onload=function () {            var oCh = document.getElementById('change');            oCh.onclick=function () {        document.getElementById('imgcode').src="/practice/ResponseDemo4?K="+Math.random();                                                                                                                     <!-- 请求地址后面添加一个随机参数，避免浏览器缓存图片地址-->            };        };    </script>  </head>  <body>     <br>    <form>        用户名:<input type="text" name="username"><br>        <br>        密码 :<input type="password" name="password"><br>        <br>        验证码<input type="text" name="checkcode"><img src='/practice/RandomCodeServlet' id="imgcode">        <input type="button" value="换一张"  id="change"><br>        <input type="submit" value="注册">    </form>  </body></html>

1 0