0
点赞
收藏
分享

微信扫一扫

Day03【Response】综合案例-图片验证码(新开发方式)


图片验证码效果

Day03【Response】综合案例-图片验证码(新开发方式)_js


Servlet随机生成一个字符串,然后将字符串转成图片,通过响应的字节流写到浏览器的img标签

图片验证码分析

Day03【Response】综合案例-图片验证码(新开发方式)_字符串_02

图片验证码的业务逻辑

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>


举报

相关推荐

0 条评论