课程名称：三小时轻松掌握常用验证码制作-第2章
课程章节：随机字符串验证码
课程讲师：十方上下
课程内容：
1 随机字符串验证码的实现-Java实现
package com.zhoufengbin.servlet;
import javax.imageio.ImageIO;
import javax.servlet.*;
import javax.servlet.http.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
public class RandonStringCodeServlet extends HttpServlet {
private Random random = new Random();
private int width = 80;
private int height = 30;
private int fontSize = 12;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.创建画板 宽度 高度 字体颜色
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//2.创建画笔
Graphics2D pen = bufferedImage.createGraphics();
//3.生成随机内容
String code = "1234";
//4.绘制内容
//4.1设置绘制区域
pen.fillRect(0, 0, width, height);
//4.2设置字体
pen.setFont(new Font("微软雅黑", Font.BOLD, fontSize));
//4.3按顺序绘制字符
for (int i = 0; i < code.length(); i++){
pen.setColor(randomColor());
pen.drawString(code.charAt(i)+"", 5+i*fontSize, (fontSize+height)/2);
}
//4.4绘制噪音线
//5.存为图片发送
ServletOutputStream out = response.getOutputStream();
ImageIO.write(bufferedImage, "png", out);
out.flush();
out.close();
}
private Color randomColor(){
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r, g, b);
}
}
<%--
Created by IntelliJ IDEA.
User: zfb22
Date: 2022/9/5
Time: 20:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>随机字符串验证码</title>
<style>
.code_a {
color: #0000ff;
font-size:12px;
text-decoration: none;
cursor: pointer;
}
#imgCode {
cursor: pointer;
}
</style>
</head>
<body>
<form action="" method="post">
<label>验证码</label>
<input type="text" id="inCode" name="inCode"/>
<img src="first" align="center" id="imgCode"/>
<a class="code_a">换一张</a><br>
<input type="submit" value="登录"/>
</form>
<div style="color:red">${err}</div>
</body>
</html>
2 随机字符串验证码的实现-JQuery实现
使用JQuery实现的验证码的目的：减轻服务器压力
缺点：纯JQuery验证码容易破解
使用JQuery验证码的关键内容：canvas标签
<%--
Created by IntelliJ IDEA.
User: zfb22
Date: 2022/9/5
Time: 20:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>随机字符串验证码</title>
<style>
.code_a {
color: #0000ff;
font-size:12px;
text-decoration: none;
cursor: pointer;
}
#imgCode {
cursor: pointer;
}
</style>
<script>
// 高度，宽度，字符大小，字符集
var w = 80;
var h = 24;
var fontsize =h -6;
var str = "1234567890ABCDEF";
//随机生成最大值不超过max的整数
function randInt(max){
return Math.floor(Math.random()*100000%max);
}
//生成随机长度的字符串验证码
function randCode(len){
if (len < 4){
len =4;
}
var code = "";
for (var i=0; i < len; i ++){
code += str.charAt(randInt(str.length));
}
return code;
}
//生成随机颜色
function randColor(){
var r = randInt(256);
var g = randInt(256);
var b = randInt(256);
return "rgb("+r+","+g+","+b+")";
}
//绘制图片
function drawcode(canvas){
var valicode = randCode(4);
w = 5 + fontsize*valicode.length;
if (canvas != null && canvas.getContext && canvas.getContext("2d")){
//设置显示区域大小
canvas.style.width = w;
//设置画板的高度
canvas.setAttribute("width", w);
canvas.setAttribute("height",h);
//得到画笔
var pen = canvas.getContext("2d");
//绘制背景
pen.fillStyle = "rgb(255,255,255)";
//设置水平线
pen.textBaseline = "top";
//绘制内容
for (var i = 0; i < valicode.length; i++){
pen.fillStyle = randColor();
pen.font = "bold" + (fontsize+randInt(3)) + "px 微软雅黑";
pen.fillText(valicode.charAt(i), 5+fontsize*i, randInt(5));
}
//绘制噪音线
for (var i = 0; i < 2; i++){
pen.moveTo(randInt(w)/2, randInt(h));
pen.lineTo(randInt(w), randInt(h));
pen.strokeStyle = randColor();
pen.lineWidth = 2;
pen.stroke();
}
return valicode;
}
}
var valicode;
function changcode(){
var cvs = document.getElementById("cvs");
valicode = drawcode(cvs);
}
function valiCode(){
var code = document.getElementById("inCode").value;
if (code.toLowerCase() == valicode.toLowerCase()){
return true;
}else {
document.getElementById("err").innerHTML = "输入的验证码错误!";
changcode();
return false;
}
}
window.onload = changcode;
</script>
</head>
<body>
<form action="index.jsp" method="post">
<label>验证码</label>
<input type="text" id="inCode" name="inCode"/><br>
<canvas id="cvs" onclick="changcode()"></canvas>
<a class="code_a" onclick="changcode()" >换一张</a><br>
<input type="submit" value="登录" onclick="return valiCode()"/>
</form>
<div id="err" style="color:red"></div>
</body>
</html>