页面生成验证码

页面之生成验证码

前端：

html :

<div class="form-group">
    <span class="form-con">
        <input type="text" id="veryCode" name="veryCode" placeholder="请输入验证码" autocomplete="off" class="input-style position" maxlength="4" />
        <img id="imgObj" src="" onclick="changeImg()" />
    </span>
</div>

js :

$(function(){
        changeImg();
    });

//验证码
function changeImg() {
  var imgSrc = $("#imgObj");
   var src = imgSrc.attr("src");
   imgSrc.attr("src", chgUrl(src));
}
//时间戳 : 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
function chgUrl(url) {
    var timestamp = (new Date()).valueOf();
    urlurl = url.substring(0, 17);
    if ((url.indexOf("&") >= 0)) {
        urlurl = url + "×tamp=" + timestamp;
    } else {
        urlurl = url + "?timestamp=" + timestamp;
    }
    urlurl = "http://localhost:8282/verycode/getImgCode?timestamp=" + timestamp+"&imgCodeType=NUM";
    return urlurl;
}

后端：

@Controller
@RequestMapping({"/verycode"})
public class VerifyCodeController {
    public static final String IMG_CODE_SESSION_KEY = "img_session_code";
    private int width = 100;
    private int height = 50;
    private int codeCount = 4;
    private int x = 0;
    private int fontHeight;
    private int codeY;
    @Value("${img.code.width:}")
    private String strWidth;
    @Value("${img.code.height:}")
    private String strHeight;
    @Value("${img.code.count:}")
    private String strCodeCount;
    char[] codeSequence = new char[]{'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'};
    char[] numCodeSequence = new char[]{'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'};

    public VerifyCodeController() {
    }

    public void initxuan() throws ServletException {
        try {
            if (this.strWidth != null && this.strWidth.length() != 0) {
                this.width = Integer.parseInt(this.strWidth);
            }

            if (this.strHeight != null && this.strHeight.length() != 0) {
                this.height = Integer.parseInt(this.strHeight);
            }

            if (this.strCodeCount != null && this.strCodeCount.length() != 0) {
                this.codeCount = Integer.parseInt(this.strCodeCount);
            }
        } catch (NumberFormatException var2) {
            ;
        }

        this.x = this.width / (this.codeCount + 1);
        this.fontHeight = this.height - 2;
        this.codeY = this.height - 8;
    }

    @RequestMapping(
            value = {"getImgCode"},
            method = {RequestMethod.GET}
    )
    public void getImgCode(HttpServletRequest req, HttpServletResponse resp) {
        ServletOutputStream sos = null;

        try {
            this.initxuan();
            System.setProperty("java.awt.headless", "true");
            BufferedImage buffImg = new BufferedImage(this.width, this.height, 1);
            Graphics2D g = buffImg.createGraphics();
            Random random = new Random();
            g.setColor(Color.WHITE);
            g.fillRect(0, 0, this.width, this.height);
            Font font = new Font("STIX", 0, this.fontHeight);
            g.setFont(font);
            g.setColor(Color.BLACK);
            g.drawRect(0, 0, this.width - 1, this.height - 1);
            g.setColor(Color.BLACK);

            int red;
            int green;
            int blue;
            for(int i = 0; i < 10; ++i) {
                red = random.nextInt(this.width);
                green = random.nextInt(this.height);
                blue = random.nextInt(12);
                int yl = random.nextInt(12);
                g.drawLine(red - 5, green, red + blue, green + yl);
            }

            StringBuffer randomCode = new StringBuffer();
            /*int red = false;
            int green = false;
            int blue = false;*/
            String imgCodeType = req.getParameter("imgCodeType");

            String imgCodeSessionKey;
            for(int i = 0; i < this.codeCount; ++i) {
                imgCodeSessionKey = String.valueOf(this.codeSequence[random.nextInt(36)]);
                if (imgCodeType != null && "NUM".equals(imgCodeType)) {
                    imgCodeSessionKey = String.valueOf(this.numCodeSequence[random.nextInt(10)]);
                }

                red = random.nextInt(255);
                green = random.nextInt(255);
                blue = random.nextInt(255);
                g.setColor(new Color(red, green, blue));
                g.drawString(imgCodeSessionKey, i * this.x, this.codeY);
                randomCode.append(imgCodeSessionKey);
            }

            HttpSession session = req.getSession();
            imgCodeSessionKey = req.getParameter("imgCodeSessionKey");
            if (imgCodeSessionKey == null) {
                imgCodeSessionKey = "img_session_code";
            }

            session.setAttribute(imgCodeSessionKey, randomCode.toString());
            resp.setHeader("Pragma", "no-cache");
            resp.setHeader("Cache-Control", "no-cache");
            resp.setDateHeader("Expires", 0L);
            resp.setContentType("image/jpeg");
            sos = resp.getOutputStream();
            ImageIO.write(buffImg, "jpeg", sos);
        } catch (Exception var23) {
            var23.printStackTrace();
        } finally {
            if (sos != null) {
                try {
                    sos.close();
                } catch (IOException var22) {
                    var22.printStackTrace();
                }
            }
        }
    }
    
    private String getCode() {
        String code = "000000";
        return code;
    }
}

END…

以上便是页面生成验证码的方法， 欢迎参考交流…