验证码的制作

最新推荐文章于 2026-04-13 11:16:09 发布

原创最新推荐文章于 2026-04-13 11:16:09 发布 · 539 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

java

本文介绍了如何制作Web验证码，包括在web.xml中的配置和后台Java代码实现，最终展示验证码的效果。

【制作验证码】

web.xml配置为：

  <!-- com.gdy.xiazai.getimage 类的创建 -->
  <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" onclick="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>

效果图如下：