验证码生成

<input name="code" id="code"  placeholder='验证码' maxlength="4"  class="ValidateNum" type='text' autocomplete="off">
<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
    <canvas style="position: relative;top: 5px;cursor: pointer" class="J_codeimg" id="myCanvas" onclick="code()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
</div>

code();
//向后台发送生成验证码的请求
function code() {
    $.get("/blog/code",function (data) {
        showCheck(data);
    },'json');
}

//canvas绘制图片验证码
function showCheck(code) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, 1000, 1000);
    ctx.font = "80px 'Hiragino Sans GB'";
    ctx.fillStyle = "#E8DFE8";
    ctx.fillText(code, 0, 100);
}

控制器

@GetMapping("/code")
public String code(HttpSession session){
    //定义图形验证码的长、宽、验证码字符数、干扰线宽度
    ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(140, 35, 4, 4);

    //把正确的验证码保存在session中
    String code = captcha.getCode();
    session.setAttribute("code",code);
    //返回验证码字符串
    return code;
}