您的位置:首页 > 编程语言 > Java开发

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

2016-04-21 00:03 781 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: