用java实现的给浏览器响应验证码程序。并且是实现了可以点击验证码图片换一张验证码。
最后边给出了完整的代码。
//首先定义一个自己的类并且去继承HttpServlet这个类
public class CheckImg extends HttpServlet｛
//复写HttpServlet中的doGet方法
public void doGet(HttpServletRequest req，HttpServletResponse resp) throws ServletException,
IOException{
//准备一张画纸，将验证码中的数字字母写到这张画纸中
int width = 120;
int height = 30;
BufferedImage bufi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//这里面的width、height、就是这张画纸的长宽。BufferedImage.TYPE_INT_RGB就是这张画纸基于
//RGB三原色来进行画
//这个时候并没有在这张纸上书写任何内容，但是已经可以像客户端响应请求了
ImageIO.write(bufi, "jpg", resp.getOutputStream());
}
｝这时候可以在浏览器上看到一个长120，高30的矩形小框。
//设置画笔颜色 g.setColor(Color.WHITE); //将这个颜色填充到整个画纸 g.fillRect(0,0,width,height);
浏览器上就显示出来一个白色的小框也就是上边定义的画纸
开始在画纸上画验证码了。
//定义图片上可以写什么数据
String data = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
//定义书写在画纸上的起始位置
int x =15;
int y =25;
//定义一个随机数
Random r = new Random();
//定义一个StringBuilder字符串缓冲区
StringBuilder sb = new StringBuilder();
//定义一个循环给画纸上写四个数据
for(int i = 0; i < 4; i++){
//从data中随机获取一个下标的数据
char c = data.charAt(r.nextInt(data.length()));
//每写一个数据就将这个数放到字符串缓冲区中
sb.append(c+"")
//随机生成画笔的颜色,RGB三原色随机在0-256中随机生成
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//设置字体
g.setFont(new Font("黑体",Font.BOLD,26));
//将数据写到画纸上
g.drawString(c+"",x,y);
//没写完一个调整下一个数据写的位置
x += 25;
}
//循环结束也就是所有的数据都放在字符串缓冲区中
HttpSession session = req.getSession();
session.setAttribute("checkNum",sb.toString());再重启tomcat在浏览器上能看到书写验证码了
在画纸上添加干扰信息
//添加线类型的干扰信息
for(int i = 0; i < 15 ; i++){
//同样设置线的颜色
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//开始划线,这里需要的四个参数中前两个是线开头的左边，后边两个是线结束的坐标
g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
}
//添加点类型干扰信息
for (int i = 0 ; i < 150 ; i++){
//设置点的颜色
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//开始画点,实质上这是画椭圆，将上半轴半径，左半轴半径设置为0就可以看成是一个点
g.drawOval(r.nextInt(width),r.nextInt(height),0,0);
}在浏览器上就能看到验证码上充满点和横线，降低辨识度
貌似还没有达到想要的结果，将字体设置一点倾斜度就更好了
//设置数据旋转 double theta =(30 - (r.nextInt(60)))*Math.PI/180; g.rotate(theta,x,24); //将数据写到画纸上 g.drawString(c+"",x,y); //设置完旋转要调回，防止数据旋转的看不到 g.rotate(-theta,x,24);
可以看到图片中的数据进行了略微的倾斜
html注册页面代码
这里只截取了body和script部分的代码
<body>
<fieldset id="">
<legend>注册页面</legend>
<form action="/day02/register2" method="post" id="form" >
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="userName" /><span id="span1"></span></td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="password" name="repassword" />
<span id="span2"></span>
</td>
</tr>
<tr id="tr4">
<td>
性别：
</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<span id="span3"></span>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="唱" />唱
<input type="checkbox" name="hobby" value="跳" />跳
<input type="checkbox" name="hobby" value="rap" />rap
<input type="checkbox" name="hobby" value="篮球" />篮球
<span id="span4"></span>
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country" id="country">
<option value="none">--请选择国籍--</option>
<option value="中国">中国</option>
<option value="韩国">韩国</option>
<option value="日本">日本</option>
<option value="美国">美国</option>
</select>
<span id="span5"></span>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea rows="10px" cols="20px" id="textarea" name="describe" ></textarea>
</td>
</tr>
<tr>
<td>
验证码：
</td>
<td>
//定义一个input标签，用户输入验证码
<input type="text" name="check"/>
//input标签后链接了上边写的验证码生成Servlet程序
//并且更改鼠标放在图片上的样式，和添加了点击事件
<img src="/day02/demo" id="img" onclick="checkImg()" style = "cursor: pointer">
<a href="javascript:void(0);" onclick="checkImg()">换一张</a>
</td>
</tr>
</table>
<input type="submit" id="btn2" value="提交" />
<input type="button" id="btn1" value="验证" />
</form>
</fieldset>
</body>
<script type="text/javascript">
function checkImg() {
//通过ID属性拿到img标签
var img = document.getElementById("img");
//当浏览器发现两次请求的URL相同时不会主动的向服务器请求图片
//所以需要实时的更改URL，这里采用的是在URL后边拼接一个当前系统时间的毫秒值
//这样就能保证每一毫秒的URL都不同，从而浏览器会给服务器发送图片的请求
img.src ="/day02/demo?"+new Date().getTime()
}
</script>完整的代码
@WebServlet(urlPatterns = "/demo")
public class CheckImg extends HttpServlet {
//复写HttpServlet中的doGet方法
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException{
//准备一张画纸，将验证码中的数字字母写到这张画纸中
int width = 120;
int height = 30;
BufferedImage bufi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//这里面的width、height、就是这张画纸的长宽。BufferedImage.TYPE_INT_RGB就是这张画纸基于
//RGB三原色来进行画
//获取一个画笔对象，给图片上画画
Graphics2D g = (Graphics2D) bufi.getGraphics();
//设置画笔颜色
g.setColor(Color.WHITE);
//将这个颜色填充到整个画纸
g.fillRect(0,0,width,height);
//定义图片上可以写什么数据
String data = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
//定义书写在画纸上的起始位置
int x =15;
int y =25;
//定义一个随机数
Random r = new Random();
//定义一个循环给画纸上写四个数据
for(int i = 0; i < 4; i++){
//从data中随机获取一个下标的数据
char c = data.charAt(r.nextInt(data.length()));
//随机生成画笔的颜色,RGB三原色随机在0-256中随机生成
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//设置字体
g.setFont(new Font("黑体",Font.BOLD,26));
//设置数据旋转
double theta =(30 - (r.nextInt(60)))*Math.PI/180;
g.rotate(theta,x,24);
//将数据写到画纸上
g.drawString(c+"",x,y);
//设置完旋转要调回，防止数据旋转的看不到
g.rotate(-theta,x,24);
//将数据写到画纸上
g.drawString(c+"",x,y);
//g.rotate(-theta,r.nextInt(width),24);
//设置完旋转要调回，防止数据旋转的看不到
g.rotate(-((10)*3.14/180),15*i+8,7);
//每写完一个调整下一个数据写的位置
x += 25;
}
//添加线类型的干扰信息
for(int i = 0; i < 15 ; i++){
//同样设置线的颜色
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//开始划线,这里需要的四个参数中前两个是线开头的左边，后边两个是线结束的坐标
g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
}
//添加点类型干扰信息
for (int i = 0 ; i < 150 ; i++){
//设置点的颜色
g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
//开始画点,实质上这是画椭圆，将上半轴半径，左半轴半径设置为0就可以看成是一个点
g.drawOval(r.nextInt(width),r.nextInt(height),0,0);
}
//给客户端响应请求
ImageIO.write(bufi, "jpg", resp.getOutputStream());
}
}
