您的位置：首页 > 其它

网页生成验证码技术

2016-07-18 12:38 169 查看

后台servlet代码如下:

//告诉客户端此响应的格式
response.setContentType("image/jpeg");

int width = 80;
int height = 40;
//设置验证码图片的宽、高以及图片类型（这里是RGB类型）
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//拿到一个Graphics对象
Graphics g = img.getGraphics();
//绘制背景
g.setColor(Color.white);
g.fillRect(0, 0, width, height);

//设置字体
g.setFont( new Font("黑体",Font.BOLD,18));
//以毫秒时间为种子创建一个随机数生成器
Random r = new Random(new Date().getTime());

for(int i=0;i<4;i++){
//生成随机数字0-9
int a = r.nextInt(10);
int y = 10+r.nextInt(20);
//生成随机颜色
Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
g.setColor(c);
//将数字画到图片中
g.drawString(""+a, 5+i*width/4, y);
}

//绘制干扰线
//      for(int i=0;i<10;i++){
//          Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
//          g.setColor(c);
//          g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
//      }

//绘制干扰点
for(int i=0;i<100;i++){
Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
g.setColor(c);
int x = r.nextInt(width);
int y = r.nextInt(height);

g.drawLine(x, y, x, y);
}

//类似于流中的close()带动flush()---把数据刷到img对象当中
g.dispose();
ImageIO.write(img, "jpeg", response.getOutputStream());

浏览器端代码如下:

<html>
<head>
<title>模拟登陆界面</title>
<script type="text/javascript">
function changeImg(){
var imgNode = document.getElementById("imgId");
var t = new Date().getTime();
imgNode.src = "/JavaWeb/img?"+t;
}
</script>
</head>
<body>
用户名:<input type="text" name="name"/><br/><br/>
密    码:<input type="password" name="pwd"/><br/><br/>
验证码:<input type="text" name="name"/>
<img id="imgId" src="/JavaWeb/img"/>
<a href="javascript:changeImg()">看不清</a><br/>
<input type="submit" value="登录"/>
</body>
</html>

值得一提的小技巧是，在js中，img的src后面带了个以时间毫秒数的参数t，保证每次请求都不同，以实现验证码更换功能，加入不带参数，浏览器以为是同一个请求，根据缓存机制，不会像服务器端发请求消息。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： servlet 验证码图片

相关文章推荐

新的分享

章节导航