1.情景展示

　　登录时，生成随机验证码图片，如何实现？ 　　 

2.原因分析

　　后台生成验证码并生成图片返回至前台 

3.解决方案

　　导包

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.RandomStringUtils;
import base.web.tools.WebUtils;

　　获取验证码请求处理

/**
 * 获取验证码
 * @explain
 * @return 随机数图片
 */
public String getImage() {
    try {
        int width = 55;
        int height = 25;
        // 取得一个4位随机数字字符串
        String s = RandomStringUtils.randomNumeric(4);
        HttpServletResponse response = WebUtils.getResponse();
        // 存入cookie，用于与用户的输入进行比较
        Cookie cookie = new Cookie("validateCode", s);
        response.addCookie(cookie);
        response.setContentType("images/jpeg");
        response.setHeader("Cache-Control", "no-cache");
 
        ServletOutputStream out = response.getOutputStream();
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        // 设定背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
 
        // 设置字体
        Font mFont = new Font("宋体", Font.BOLD, 18);
        g.setFont(mFont);
 
        // 画边框
        // g.setColor(Color.BLACK);
        // g.drawRect(0, 0, width - 1, height - 1);
 
        // 生成随机类
        Random random = new Random();
        // 将认证码显示到图象中
        g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
        // 将验证码画进图片
        g.drawString(s, 5, 20);
        // 图象生效
        g.dispose();
        // 输出图象到页面
        ImageIO.write((BufferedImage) image, "JPEG", out);
        out.flush();
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}
 
/**
 * 给定范围获得随机颜色
 * @explain
 * @param fc
 * @param bc
 * @return
 */
private Color getRandColor(int fc, int bc) {
    Random random = new Random();
    fc = (fc > 255) ? 255 : fc;
    bc = (bc > 255) ? 255 : bc;
    // 获取3次
    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);
}

　　html片段

" id="randomImage"  height="35px" width="100px" onclick='sjs()' />　　

　　js片段

function sjs () {
    // 获取图片请求后面加一个随机参数，是为了避免同一个请求浏览器拒绝向服务器发送请求的问题（缓存）
    $("#randomImage")[0].src = baseUrl + "/getImage.do?s=" + Math.random();
};