图片验证码效果
Servlet随机生成一个字符串,然后将字符串转成图片,通过响应的字节流写到浏览器的img标签
图片验证码分析
图片验证码的业务逻辑
test\java\com\wzx\service\TestVerificationCodeService.java
public class TestVerificationCodeService {
@Test
public void test01() throws IOException {
//1:创建一个验证码的业务
VerificationCodeService vcs = new VerificationCodeService();
//2:生产一个随机的4个字符组成的字符串
String code = vcs.createRandomCode();
System.out.println(code);
//3:将字符串转成图片
BufferedImage image = vcs.changeStringToImage(code);
//4:使用OutputStream写到浏览器
System.out.println(image);
File file = new File(System.currentTimeMillis()+".jpg");
file.createNewFile();
FileOutputStream outputStream = new FileOutputStream(file);
ImageIO.write(image,"jpeg",outputStream);//参1,内存中的图片 参2,格式 参3,字节输出流
}
}
随机字符串生成
src\com\wzx\service\VerificationCodeService.java
//生成验证码图片的业务类
public class VerificationCodeService {
//生成验证码字符串
public String createRandomCode() {
String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//36
System.out.println(str.length());
//Random类 产生指定范围内的随机数
Random random = new Random();
StringBuilder sb = new StringBuilder();
//截取字符
for (int i = 0; i < 4; i++) {
int index = random.nextInt(str.length());//
char letter = str.charAt(index);
//System.out.println(letter);
sb.append(letter);
}
return sb.toString();
}
随机字符串转图片
代码不需要敲,只需要根据不同的样式要求,能修改字体大小,颜色即可
src\com\wzx\service\VerificationCodeService.java
//字符串转图片
public BufferedImage changeStringToImage(String code) {
Random rd = new Random();
//创建一个画布
BufferedImage image = new BufferedImage(75, 28, BufferedImage.TYPE_INT_RGB);
//画笔
Graphics g = image.getGraphics();
//给画笔设置颜色
g.setColor(new Color(240,240,240)); //#00000 FFFFFF
//设置验证码的 背景色
g.fillRect(0, 0, 75, 28);
g.setFont(new Font("宋体",Font.BOLD,16));
g.setColor(new Color(0,0,0)); //#00000 FFFFFF
// g.drawString(checkCodeStr, 20, 20);
for (int i = 0; i <4 ; i++) {
//画字符
g.setColor(new Color(rd.nextInt(120),rd.nextInt(120),rd.nextInt(120)));
g.drawString(code.charAt(i)+"", 16*i + rd.nextInt(16), 15 + rd.nextInt(10) );
if(i % 2 == 0) {//画线
g.setColor(new Color(rd.nextInt(120), rd.nextInt(120), rd.nextInt(120)));
g.drawLine(rd.nextInt(75), rd.nextInt(28), rd.nextInt(75), rd.nextInt(28));
}
}
return image;
}
}
img标签显示验证码图片
web\login.html
<form method="post">
username:<input type="text" name="username"/><br/>
password:<input type="password" name="password"/><br/>
code:<input type="text" name="code"/> <img id="img" src="/web01_reponse/img"/><br/>
<input type="submit" value="login">
</form>
src\com\wzx\pack06_code\Demo06ImageCodeSevlet.java
@WebServlet("/img")
public class Demo06ImageCodeSevlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1:创建一个验证码的业务
VerificationCodeService vcs = new VerificationCodeService();
//2:生产一个随机的4个字符组成的字符串
String code = vcs.createRandomCode();
System.out.println(code);
//3:将字符串转成图片
BufferedImage image = vcs.changeStringToImage(code);
//4:使用OutputStream写到浏览器
System.out.println(image);
ImageIO.write(image,"jpeg",response.getOutputStream());//参1,内存中的图片 参2,格式 参3,字节输出流
}
}
img标签点击刷新
<script type="application/javascript">
var img = document.getElementById("img");
img.onclick = function(){
img.src = "/web01_reponse/img?time="+new Date();
}
</script>