图片验证码(Struts2中使用)

Posted 2020-10-18 蚊蚊蚊蚊蚊170624

写在前面：

　　最近在项目中做了一个登录页面，用到了图片验证码的功能，所以记录一下。方便之后再有用到，直接拿来用即可。其实图片验证码的生成都是有固定步骤的，网上也有很多的例子，有的时候，如果不想深究，都是可以直接拿来用的。嘻嘻~~~~

 

生成图片验证码工具类并在struts2中使用，大概需要以下五个步骤：

1.获取随机数验证码字符串
2.生成验证码图片
3.将图片转为图片流格式
4.提供图片流类型的get()方法
5.配置struts.xml

其实上面的前三个步骤，都是在为生成图片验证码做准备，我们将前三步的内容，封装成一个图片验证码工具类。

图片验证码工具类：

/**
 * Description:生成图片验证码工具类
 *           1.获取随机数验证码字符串
 *           2.生成验证码图片
 *           3.将图片转为图片流格式
 * Author: Eleven
 * Date: 2017/12/16 8:35
 */
public class CodeUtil {
    
    //1.生成随机数验证码字符串
    public static String getCodeStr(){

        //字符数组(除去易混淆的数字0、数字1、字母l、字母o、字母O)
        char[] codes = "23456789ABCDEFGHIJKMNPQRSTUVWXYZ".toCharArray();

        //指定验证码长度
        int len = 4;
        //生成随机的验证码字符串
        String code = "";
        for(int i=0;i<len;i++){
            int r = (int) (Math.random()*codes.length);
            code += String.valueOf(codes[r]);
        }
        System.out.println("验证码字符串"+code);

        return code;

    }


    /**
     *生成验证码图片
     * @param codeStr 验证码字符串
     * @return  图片
     */
    public static BufferedImage createImage(String codeStr){
        //验证码长度
        int len = codeStr.length();
        //字体大小
        int fSize = 20;
        int fWidth = fSize + 1;
        //图片宽度
        int width = fWidth * len + 6;
        //图片高度
        int height = fSize * 2 + 1;
        //图片
        BufferedImage img = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB );
        //获取画笔
        Graphics g = img.getGraphics();

        //设置背景颜色 并填充
        g.setColor(new Color(0xDCDCDC));
        g.fillRect(0,0,width,height);

        //设置边框颜色
        g.setColor(Color.LIGHT_GRAY);
        g.drawRect(0,0,width-1,height-1);

        //绘制小点点 1*1的小矩形
        g.setColor(Color.LIGHT_GRAY);
        Random random = new Random();
        for(int i=0;i<len*6;i++){
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            //1*1的小矩形
            g.drawRect(x,y,1,1);
        }

        //或者填充100条干扰线
       /* for (int i = 0; i < 100; i++) {
            g.setColor(getRandColor(160, 200));
            g.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));
        }*/

        //绘制验证码
        int codeY = height - 10;
        //g.setColor(new Color(19,148,246));
        //设置字体
        g.setFont(new Font(null, Font.BOLD, fSize));
        for(int i=0;i<len;i++){
            //设置随机颜色
            g.setColor(new Color(random.nextInt(150), random.nextInt(150), random.nextInt(150)));
            g.drawString(String.valueOf(codeStr.charAt(i)),i * 17 + 9, codeY);
        }

        //关闭资源
        g.dispose();

        return img;
    }



    /**
     * 验证码图片转为流格式
     * @param img 图片
     * @return 图片流
     */
    public static ByteArrayInputStream getImgAsInputStream(BufferedImage img){
        ByteArrayInputStream inputStream = null;
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
        try {
            jpeg.encode(img);
            byte[] bts = bos.toByteArray();
            inputStream = new ByteArrayInputStream(bts);

        } catch (IOException e) {
            e.printStackTrace();
            throw new BusinessException("图片转为图片流格式异常了呀");
        }

        return inputStream;

    }


    //填充干扰线的时候生成随机颜色
    public static Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
}

工具类已经写好了(前三个步骤已经做完了)，在action中进行调用(记得第四步的提供图片流的get()方法)

action类：

/**
 * Description:登录Action
 * Author: Eleven
 * Date: 2017/12/14 19:28
 */
@Controller("LoginAction")
public class LoginAction2 extends BaseAction{

    //图片流
    private ByteArrayInputStream inputStream;

    public String getCode(){
        //利用验证码工具类生成图片验证码
        //1.获取随机数验证码字符串
        String code = CodeUtil.getCodeStr();
        //2.生成验证码图片
        BufferedImage image = CodeUtil.createImage(code);
        //3.将图片转为图片流格式
        inputStream = CodeUtil.getImgAsInputStream(image);
        //获取验证码字符串存到session中
        ActionContext.getContext().getSession().put("code", code);

        return SUCCESS;
    }


   //4.提供图片流的get()方法
    public ByteArrayInputStream getInputStream() {
        return inputStream;
    }
}

 

完成第5步，配置struts.xml文件：

 <!--验证码-->
        <action name="getCode" class="LoginAction" method="getCode">
            <result type="stream">
                <param name="contentType">image/jpeg</param>
                <!--与action中提供get方法的变量名相同-->
                <param name="inputName">inputStream</param>
            </result>
        </action>

 

经过上面的几个步骤，就已经大功告成了，下面我们在jsp页面进行调用：

<img id="codeImg" src="getCode" name="codeImg" height="25px" width="70px" alt="看不清，换一张" onclick="changeCode()">

src是调用获取验证码的action，可以点击图片进行更换验证码，调用的js如下：

<script type="text/javascript">
　　function changeCode(){
　　　　　　　//加一个时间戳，防止浏览器不重新发送请求就直接使用缓存中的图片，而导致点击时不进行刷新
            document.form1.codeImg.src = "${baseURL}/getCode.action?timeStamp=" + new Date().getTime();

        }
</script>

成功截图：
小小迷你图，啊哈哈哈~~~~~真可爱。。。。。。



参考链接：http://www.cnblogs.com/dongliyang/archive/2012/08/24/2654431.html