验证码的制作

偏执的太偏执、 2022-08-21 07:51 240阅读 0赞

【制作验证码】

web.xml配置为：

<servlet>
      	<servlet-name>gimg</servlet-name>
      <servlet-class>com.gdy.xiazai.getimage</servlet-class>
      </servlet>
      <servlet-mapping>
      	<servlet-name>gimg</servlet-name>
      	<url-pattern>*.gimg</url-pattern>
      </servlet-mapping>
      
      <welcome-file-list>
        <welcome-file>login.html</welcome-file>
      </welcome-file-list>

后台java代码为：

package com.gdy.xiazai;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.net.URLEncoder;
    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;
    
    /**
     * 【*。gimg】请求处理类
     * 功能：
     * 	制作验证码
     * @author Administrator
     *
     */
    public class getimage extends HttpServlet {
    	
    	@Override
    	protected void service(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    //		getimg(req,resp);
    		outputYZM(req, resp);
    	}
    	
    	/**
    	 * 验证码的制作
    	 * @param req
    	 * @param resp
    	 */
    	protected void outputYZM(HttpServletRequest req, HttpServletResponse resp){
    		int width=100;
    		int height=20;
    		//创建缓存图像
    		BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
    		//创建画笔
    		Graphics grap=image.getGraphics();
    		//指定边框颜色
    		grap.setColor(Color.RED);
    		//画图像边框
    		grap.drawRect(0, 0, width, height);
    		
    		//填充一下矩形的背景颜色
    		//设定画笔的颜色
    		grap.setColor(Color.YELLOW);
    		//填充矩形背景
    		grap.fillRect(1, 1, width-2, height-2);
    
    		//填充内容
    		//设置画笔的颜色
    		grap.setColor(Color.BLACK);
    		String str="Android训练营";
    		//随机产生4个数字输出到页面
    		Random r=new Random();
    		for(int i=0;i<4;i++){
    			//产生随机数字
    //			int n= r.nextInt(10);
    //			grap.drawString(n+"", ((width-2)/5)*(i+1), 16);
    			int flag=r.nextBoolean()?1:-1;
    			//设置随机大小的字体
    			grap.setFont(new Font("幼圆",Font.BOLD + Font.ITALIC,20+flag*r.nextInt(10)));
    			//产生随机字符
    			grap.drawString(str.charAt(r.nextInt(str.length()))+"", ((width-2)/5)*(i+1)+flag*r.nextInt(6), 14+r.nextInt(4)*flag);
    		}
    		
    		//设置干扰线
    		grap.setColor(Color.GRAY);
    		//画30条干扰线
    		for(int i=0;i<r.nextInt(30);i++){
    			grap.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
    		}
    		
    		//将图片输出到客户端
    		try {
    			//告诉客户端不要缓存图像
    			resp.setHeader("Expires", -1+"");
    			resp.setHeader("Cache-control", "no-cache");
    			resp.setHeader("Pragma", "no-cache");
    			ImageIO.write(image, "jpg", resp.getOutputStream());
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	}
    }

HTML代码为：

<!DOCTYPE html>
    <html>
      <head>
        <title>MyHtml.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      </head>
      <body>
        <table>
        	<tr>
        		<td>姓名：</td>
        		<td><input type="text"></td>
        	</tr>
        	<tr>
        		<td>年龄：</td>
        		<td><input type="text"></td>
        	</tr>
        	<tr>
        		<td><input type="text"></td>
        		<td>验证码：<img id="id_yzm" src="/T20160419/a.gimg" οnclick="change()" /><a  href="javascript:change()" >看不起， 换一张</a></td>
        		<script type="text/javascript">
        			function change(){
        				//alert("aa");
        				var yzm=document.getElementById("id_yzm");
        				//加一个无意义的参数，让地址每次都变化
        				yzm.src="/T20160419/a.gimg?t="+new Date().getTime();
        			}
        		</script>
        	</tr>
        	<tr>
        		<td></td>
        		<td><input type="submit" value="提交"></td>
        	</tr>
        </table>
      </body>
    </html>

效果图如下：

![Center][]

[Center]: /images/20220724/74f273aa371d4ba184684e524cdc501f.png