随机生成验证码页面显示

package cn.lw.checking;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*
 * 创建图片
 */
public class ServletDemo extends HttpServlet{
 public void doGet(HttpServletRequest res,HttpServletResponse req){
  //创建一张内存中的图片,
  BufferedImage bi = new BufferedImage(70, 35, BufferedImage.TYPE_INT_RGB);
  //获取当前图片画笔
  Graphics g = bi.getGraphics();
  //设置图片背景色
  g.setColor(new Color(240,240,240));
  //填充图片
  g.fillRect(0, 0, 70,35);
  //设置颜色
  g.setColor(Color.RED);
  //干扰线
  g.drawLine(5, 5, 70-5, 35-5);
  //设置字体
  g.setFont(new Font("华文行楷", Font.BOLD, 26));
  //写入数据
  g.drawString("hello",0,30);
  //保存图片
  try {
   ImageIO.write(bi, "JEG", req.getOutputStream());
  } catch (IOException e) {
   e.printStackTrace();
  }
 }

}

package cn.lw.checking;

import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ServletDemo1 extends HttpServlet {
 public void doGet(HttpServletRequest res,HttpServletResponse rep){
  VCode vc = new VCode();
  BufferedImage img = vc.getImage();
  System.out.println(vc.getCode());
  try {
   VCode.saveImage(img, rep.getOutputStream());
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }
}

package cn.lw.checking;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;

/*
 * 设置图片.随机生成,验证码
 */
public class VCode {
 private int w = 70;// 宽
 private int h = 35;// 高
 private Color bgColor = new Color(240, 240, 240); // 背景色
 private Random random = new Random(); // 随机数
 private StringBuffer code = new StringBuffer(4);// 存放4个字符

 /*
  * 1.创建图片 2.创建背景色
  */
 private BufferedImage createImage() {
  // 创建图片
  BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
  // 设置笔画颜色
  img.getGraphics().setColor(bgColor);
  // 重填一个与图形一样大小的矩形,设置背景色.
  img.getGraphics().fillRect(0, 0, w, h);
  return img;
 }

 /*
  * 生成随机颜色
  */
 private Color randomColor() {
  int r = random.nextInt(256);
  int g = random.nextInt(256);
  int b = random.nextInt(256);
  return new Color(r, g, b);
 }

 /*
  * 字体名,样式,字号.
  */
 // 字体
 private String[] fontName = { "宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑",
   "楷体_GB2312" };
 // 字号规范
 private int[] fontSize = { 24, 25, 26, 27, 28 };

 /*
  * 随机生成字体
  */
 private Font randomFont() {
  // 如果数组长度为7,数值为0~6;
  int index = random.nextInt(fontName.length);
  String name = fontName[index];

  int style = random.nextInt(4);
  index = random.nextInt(fontSize.length);

  // 随机生成fontSize下标
  int size = fontSize[index];

  return new Font(name, style, size);
 }

 // 生成大写字母小写字母A~Z 数字0~9;
 private String codes = "abcdefghigklmnopqrstuvwxyzABCDEFGHILKLMNOPQRSTUVWXYZ0123456789";

 // 随机生成字符
 private String randomChar() {
  int index = random.nextInt(codes.length());
  return codes.charAt(index) + "";
 }

 private void drawLine(BufferedImage img) {
  Graphics2D g = (Graphics2D) img.getGraphics();
  g.setColor(Color.BLACK);
  g.setStroke(new BasicStroke(1.5F));
  for (int i = 0; i < 5; i++) {
   int x1 = random.nextInt(w);
   int y1 = random.nextInt(h);
   int x2 = random.nextInt(w);
   int y2 = random.nextInt(h);
   g.drawLine(x1, y1, x2, y2);
  }
 }

 // 用户调用这个方法获取图片
 public BufferedImage getImage() {

  BufferedImage im = createImage();
  Graphics g = im.getGraphics();
  for (int i = 0; i < 4; i++) {
   String ch = this.randomChar();// 获取随机字符
   code.append(ch);// 记录下来生成的字符
   g.setColor(this.randomColor());// 随机颜色
   g.setFont(this.randomFont());// 随机字体
   g.drawString(ch, w / 4 * i, h - 5);
  }
  this.drawLine(im);// 添加干扰线
  return im;

 }

 // 这个方法必须在getImage()方法之后调用!
 public String getCode() {
  return code.toString();
 }

 // 保存图片
 public static void saveImage(BufferedImage img, OutputStream out)
   throws IOException {
  ImageIO.write(img, "JPEG", out);
 }
}

 

package cn.lw.junit;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.junit.Test;

import cn.lw.checking.VCode;

public class Text {
 public void fun1() throws Exception, IOException{
  //创建一张内存中的图片
  BufferedImage img = new BufferedImage(70,35,BufferedImage.TYPE_INT_RGB);
  //获取当前图片的笔画
  Graphics g = img.getGraphics();
  g.setColor(new Color(240,240,240));
  g.fillRect(0, 0, 70, 35);
  
  g.setColor(Color.RED);
  g.drawLine(5, 5, 70-5, 35-5);
  g.setFont(new Font("华文行楷", Font.BOLD, 26));
  g.drawString("hello", 0, 30);
  // 保存图片
  ImageIO.write(img, "JPEG", new FileOutputStream("F:\\a.jpg"));
 }
 @Test
 public void fun2() throws FileNotFoundException, IOException {
  VCode v = new VCode();
  BufferedImage img = v.getImage();
  VCode.saveImage(img, new FileOutputStream("F:\\a.jpg"));
 }
}

jsp 部分

 

</head>
 
  <body>
    This is my JSP page. <br>
    验证码:
    <input type="text" name="vcode" size="3"/>&nbsp;
    <img id=vc src="checking/ServletDemo1" border="2"/>
    <a href="javascript:_chage()">看不清换一张</a>
    <script type="text/javascript">
     function _chage(){
     var img = document.getElementById("vc");
     img.src = "/checking/ServletDemo1?a=" + new Date().getTime();
     }
    </script>
    <br/>
    <input type="submit" value="提交"/>
  </boday>

 

### 随机验证码生成与验证 为了在 HTML 页面中实现随机验证码生成与验证,可以采用 Python 后端配合前端页面的方式完成。以下是完整的解决方案。 #### 1. 使用 Flask 实现后端逻辑 Flask 是一种轻量级的 Web 应用框架,适合快速开发此类功能。以下是一个基于 Flask 的示例代码: ```python from flask import Flask, request, jsonify, make_response import random import string app = Flask(__name__) @app.route('/generate_captcha', methods=['GET']) def generate_captcha(): captcha_length = 6 characters = string.ascii_letters + string.digits captcha_code = ''.join(random.choice(characters) for _ in range(captcha_length)) response = make_response(jsonify({'captcha': captcha_code})) response.set_cookie('captcha', captcha_code) return response @app.route('/validate_captcha', methods=['POST']) def validate_captcha(): user_input = request.json.get('input') stored_captcha = request.cookies.get('captcha') if user_input and stored_captcha and user_input.lower() == stored_captcha.lower(): return jsonify({"status": "success", "message": "Captcha is valid."}) else: return jsonify({"status": "error", "message": "Invalid Captcha."}) if __name__ == '__main__': app.run(debug=True) ``` 上述代码实现了两个主要的功能接口:`/generate_captcha` 和 `/validate_captcha`[^2]。 #### 2. 前端 HTML 页面设计 下面是一段简单的 HTML 和 JavaScript 代码,用于展示和验证验证码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CAPTCHA Verification</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h3>Enter the CAPTCHA:</h3> <div id="captcha-container">Loading...</div> <input type="text" id="captcha-input" placeholder="Type the CAPTCHA here..."> <button onclick="verifyCaptcha()">Verify</button> <p id="result-message"></p> <script> function fetchCaptcha() { $.getJSON("/generate_captcha", function(data) { $("#captcha-container").text("CAPTCHA: " + data.captcha); }); } function verifyCaptcha() { const userInput = $('#captcha-input').val(); $.ajax({ url: "/validate_captcha", method: "POST", contentType: "application/json", data: JSON.stringify({ input: userInput }), success: function(response) { $('#result-message').text(response.message); } }); } $(document).ready(function() { fetchCaptcha(); // Load a new CAPTCHA when page loads. }); </script> </body> </html> ``` 这段代码通过 jQuery 调用了后端 API 来获取和验证验证码,并将其显示给用户输入[^3]。 --- ### 技术细节说明 - **验证码生成** 利用 `random.choice()` 方法从字母和数字集合中选取字符组合成固定长度的字符串作为验证码[^1]。 - **状态管理** 将生成验证码存储到 HTTP Cookie 中以便后续验证操作能够匹配用户的输入值[^2]。 - **安全性考虑** 在实际部署环境中应增加更多安全措施,比如设置较短的有效期、限制尝试次数以及启用 HTTPS 协议传输数据等[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值