验证码调用和web中字节字符流的解释

刺骨的言语ヽ痛彻心扉 2022-06-12 05:46 112阅读 0赞

首先，要学习验证码的制作，要理解字节流和字符流的作用。要向客户端转发消息，就要通过字节流或者字符流，在jsp中，发送消息的对象时out字符流。他可以发送文本消息。但是不能发送音频和视频图片等信息。这就促使了字节流的出现。  
当然同字节流相比，字符流更加的快速。  
今天我给大家要讲的是使用字节流向客户端发送验证码，并且将存在的几个问题给大家解释清楚。

<%@page import="java.awt.Color"%>
    <%@page import="java.awt.Graphics"%>
    <%@page import="java.io.OutputStream"%>
    <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%>
    <%@page import="java.awt.image.BufferedImage"%>
    <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%>
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        out.clearBuffer();
        out = pageContext.pushBody();
        //告诉浏览器你要传送什么内容
        response.setHeader("content-type", "image/jpeg");
        //创建一张在内存中的照片
        BufferedImage bi = new BufferedImage(100,20,BufferedImage.TYPE_INT_RGB);
    
        //涂鸦
        Graphics g = bi.getGraphics();
        String letters = "ABCDEFGHIJKLMNOPQRSJYVWXYZabcdefghijklmnopqrsjyvwxyz0123456789";
        for(int i = 0;i < 4;i++)
        {
            int rand = (int)(Math.random()*62); 
            int rand1 = (int)(Math.random()*255);   
            int rand2 = (int)(Math.random()*255);   
            int rand3 = (int)(Math.random()*255);   
    
            char c = letters.charAt(rand);
            g.setColor(new Color(rand1,rand2,rand3));
            g.drawString(c+"",i*20+10,15);
            }
        for(int i = 0;i < 4;i++){
        int x1 = (int)(Math.random()*10);
        int x2 = (int)(Math.random()*50);
        int y1 = (int)(Math.random()*50);
        int y2 = (int)(Math.random()*100);
        g.drawArc(x1,x2, y1, y2, 0,360);
        }
        //把图片发送给客户端
        OutputStream os = response.getOutputStream();
        JPEGImageEncoder j = JPEGCodec.createJPEGEncoder(os);
        j.encode(bi);   
    
    
    %>

**问题一**  
由于支持库的版本问题，可能识别不出来JPEGCodec这个类，  
解决办法：  
![选择JRE库然后单击右键][JRE]  
![选择Libraries中的edit进行][Libraries_edit]  
然后选择1.7版本的或者其他版本点击完成。就可以使用了。  
**问题二**  
在创建字节流时，必须关闭字符流也就是将out关闭。

out.clearBuffer();
        out = pageContext.pushBody();

**问题三**  
告诉浏览器你要传送什么内容

response.setHeader("content-type", "image/jpeg");

这里还使用了html界面进行操作，有兴趣的可以看看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <script type="text/javascript">
    //整个html页面加载完成之后进行的操作
     window.onload = function(){
         
        // 获取id的dom操作对象
        var m1 = document.getElementById("m1");
        var change = document.getElementById("change");
        //添加单击事件
        change.onclick = function(){
         
        //更换照片，
        /*
            这里面存在一个问题，由于浏览器的原因，当请求同一内容时，浏览器先会检查请求请求的是否和上次一致，如果更改，则会去重新加载，否则，服务器相应304，使用缓存，等于没有更改当前页面，所以必须加上毫秒数，使得每次都会加载新的页面。
    
    */
            m1.src = "index.jsp?a = "+new Date().getTime();
        }
     }
    </script>
    <form method="post">
        用户名：<input type="text" name="name"/> <br />
        密码：<input type="password" name="password"/> <br />
        验证码:<input type="text" /><img id="m1" src="index.jsp" /> <br />
        <button type="submit">GO</button>
            <button type="button" id="change">看不清换一张</button>
    </form>

![验证码界面][SouthEast]

[JRE]: /images/20220612/e1c76c50c20244c68760de3a8f54ec68.png
[Libraries_edit]: /images/20220612/a1bea253f95147f7b81a11eccfc36b2f.png
[SouthEast]: /images/20220612/248a9c30d2b941519a99687d6fcde919.png