java后台产生验证码后台验证

直接跳severlet在java后台生成验证码:
@RequestMapping(value="yzm.action")
	public void Yzm(HttpSession session,HttpServletResponse resp){
		// 验证码图片的宽度。      
	     int width = 60;      
	     
	    // 验证码图片的高度。      
	     int height = 20;      
	     
	    // 验证码字符个数      
	     int codeCount = 4;      
	     
	     int x = 0;      
	     
	    // 字体高度      
	     int fontHeight;      
	     
	     int codeY;      
	     
	    char[] codeSequence = { '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' };      
	    x = width / (codeCount + 1);      
        fontHeight = height - 2;      
        codeY = height - 4;  
        BufferedImage buffImg = new BufferedImage(width, height,      
                BufferedImage.TYPE_INT_RGB);      
        Graphics2D g = buffImg.createGraphics();      
     
        // 创建一个随机数生成器类      
        Random random = new Random();      
     
        // 将图像填充为白色      
        g.setColor(Color.WHITE);      
        g.fillRect(0, 0, width, height);      
     
        // 创建字体,字体的大小应该根据图片的高度来定。      
        Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);      
        // 设置字体。      
        g.setFont(font);      
     
        // 画边框。      
//        g.setColor(Color.BLACK);      
//        g.drawRect(0, 0, width - 1, height - 1);      
     
        // 随机产生160条干扰线,使图象中的认证码不易被其它程序探测到。      
        g.setColor(Color.BLACK);      
        for (int i = 0; i < 1; i++) {      
            int x2 = random.nextInt(width);      
            int y2 = random.nextInt(height);      
            int xl = random.nextInt(12);      
            int yl = random.nextInt(12);      
            g.drawLine(x2, y2, x + xl, y2 + yl);      
        }      
     
        // randomCode用于保存随机产生的验证码,以便用户登录后进行验证。      
        StringBuffer randomCode = new StringBuffer();
		
        int red = 0, green = 0, blue = 0;      
     
        // 随机产生codeCount数字的验证码。      
        for (int i = 0; i < codeCount; i++) {      
            // 得到随机产生的验证码数字。      
            String strRand = String.valueOf(codeSequence[random.nextInt(36)]);      
            // 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。      
            red = random.nextInt(255);      
            green = random.nextInt(255);      
            blue = random.nextInt(255);      
     
            // 用随机产生的颜色将验证码绘制到图像中。      
            g.setColor(new Color(red, green, blue));      
            g.drawString(strRand, (i + 1) * x, codeY);      
     
            // 将产生的四个随机数组合在一起。      
            randomCode.append(strRand);      
        }      
        // 将四位数字的验证码保存到Session中。      
        session.setAttribute("validateCode", randomCode.toString());      
        ServletOutputStream sos;
		try {
			sos = resp.getOutputStream();
			ImageIO.write(buffImg, "jpeg", sos);      
			sos.close();      
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}      
	}

jsp显示页面的代码,点击图片刷新

<td><img id="img" src="yzm.action"/>${validateCode}</td>
           <td><input type="text" name="yzma"/><br/></td>
 $("#img").click(function(){
	$(this).attr("src","yzm.action?"+new Date().getTime());
    });
将文本框中的值传入后台,与最开始生成验证码的随机数进行比较即可完成验证。

页面上拿到的session的值老是比验证码晚一步,所以采取后台进行验证。这里我也不知道什么原因,望小伙伴们告知。。。

另一种思路,后台生成随机数,前端生成画布,用ajax拿随机数

//后台只生成随机数
	@RequestMapping(value="random.action")
	public void findRandom (HttpServletResponse response) throws IOException{
		 // 验证码字符个数      
	     int codeCount = 4;
	     char[] codeSequence = { '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' };
	     
	     // 创建一个随机数生成器类      
	        Random random = new Random();
	     // randomCode用于保存随机产生的验证码,以便用户登录后进行验证。      
	        StringBuffer randomCode = new StringBuffer();
	        for (int i = 0; i < codeCount; i++) {      
	            // 得到随机产生的验证码数字。      
	            String strRand = String.valueOf(codeSequence[random.nextInt(36)]);  
	            // 将产生的四个随机数组合在一起。      
	            randomCode.append(strRand);      
	        }
	        PrintWriter out = response.getWriter();
	        out.print(randomCode);
	}

jsp,jq,js代码

<body>
       <canvas id="canvas" width="70" height="34"></canvas>
       <a href="javascript:;" id="img" class="pull-right" style="line-height: 34px;text-indent: 10px;">换一张</a>
       <input type="text" class="form-control" id="yzms" name="yzms" readonly = "readonly" style="display:none" >
     
  </body>
  <script type="text/javascript">
        $.ajax({
	url:"random.action",
	success:function(k){
		console.log(k)
		 $("#yzms").attr("value",k);
		 drawPic();
	}
})

  $("#img").on("click",function(){
		var _this=$(this)
	 	$.ajax({
			url:"random.action",
			success:function(k){
				console.log(k)
				 $("#yzms").attr("value",k);
				 drawPic();
			}
		})
	}) 
  /**生成一个随机数**/
  function randomNum(min,max){
    return Math.floor( Math.random()*(max-min)+min);
  }
  /**生成一个随机色**/
  function randomColor(min,max){
    var r = randomNum(min,max);
    var g = randomNum(min,max);
    var b = randomNum(min,max);
    return "rgb("+r+","+g+","+b+")";
  }
  	
		
  /**绘制验证码图片**/
  function drawPic(){
    var canvas=document.getElementById("canvas");
    var width=canvas.width;
    var height=canvas.height;
    var ctx = canvas.getContext('2d');
    ctx.textBaseline = 'bottom';

    /**绘制背景色**/
    ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
    ctx.fillRect(0,0,width,height);
    /**绘制文字**/

  /*   for(var i=0; i<4; i++){ */
      var txt = $("#yzms").attr("value");
      ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
      ctx.font = randomNum(15,20)+'px SimHei'; //随机生成字体大小
      var x = 20;
      var y = randomNum(20,30);
      var deg = randomNum(-45, 45);
      //修改坐标原点和旋转角度
      ctx.translate(x,y);
      ctx.rotate(deg*Math.PI/180);
      ctx.fillText(txt, 0,0);
      //恢复坐标原点和旋转角度
      ctx.rotate(-deg*Math.PI/180);
      ctx.translate(-x,-y);
 /*    } */
    /* /**绘制干扰线**/
     for(var i=0; i<8; i++){
      ctx.strokeStyle = randomColor(40,180);
      ctx.beginPath();
      ctx.moveTo( randomNum(0,width), randomNum(0,height) );
      ctx.lineTo( randomNum(0,width), randomNum(0,height) );
      ctx.stroke();
    } 
    /**绘制干扰点**/
   /*  for(var i=0; i<100; i++){
      ctx.fillStyle = randomColor(0,255);
      ctx.beginPath();
      ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
      ctx.fill();
    }  */
  }

效果展示:



  • 4
    点赞
  • 15
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

小秋蜀黍

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值