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

图片验证码效果

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>