查看: 12|回复: 0

[AI人工智能教程] 用LattePanda+网页摄像头，DIY一套智能答题卡批阅系统

本帖最后由云天于 2026-6-21 18:15 编辑

【项目简介】

每次考试后手动批改选择题，不仅耗时费力，还容易出错。我利用LattePanda Alpha开发板和普通USB摄像头，配合一个纯前端HTML网页，制作了一套智能答题卡自动批阅系统。学生只需将答题卡放在摄像头下，系统就能自动识别考号、批改选择题，并实时生成统计报表。

主要功能：

摄像头实时预览，答题卡选项位置叠加辅助线，方便对齐
自动识别2B铅笔填涂的ABCD选项
考号涂点识别，支持1-3位考号，班级人数可调
智能定位模式：四个黑色定位块对齐后自动触发识别
全局考号去重，避免同一张答题卡重复批阅
实时统计：平均分、正确率、每题正误率、识别记录明细

【硬件清单】

硬件	型号/规格	用途
主机	LattePanda Alpha 864s（Intel i5-8200Y, 8GB内存）	运行网页文件、图像处理
摄像头	普通USB摄像头（笔记本内置或外接）	拍摄答题卡图像
显示器	普通电脑显示器	显示界面和识别结果
支架	激光切割亚克力板	固定摄像头，保证拍摄角度垂直

【软件清单】

软件	用途
Windows 11 Pro（LattePanda预装）	操作系统
Chrome / Edge 浏览器	运行HTML网页
Chart.js 4.4.0	统计图表渲染

【制作过程】
1. 摄像头支架设计与制作

答题卡识别的关键在于摄像头必须垂直于答题卡拍摄，否则图像畸变会导致识别失败。我使用激光切割机切割亚克力板制作了一个简易支架：

设计一块底盒用于放置答题卡
L型立柱垂直固定在底盒一侧
摄像头安装在立柱顶端，镜头垂直朝下
摄像头距离底板约25-30cm，确保640×480画面能完整覆盖答题卡区域

亚克力板透明度高、易于激光切割加工，是制作支架的理想材料。如果条件有限，也可以使用硬纸板或3D打印制作简易支架。
2. 硬件组装与连接
LattePanda Alpha是一款巴掌大小的x86单板电脑，尺寸仅115mm×78mm[，性能足以流畅运行网页应用。组装步骤：

将USB摄像头连接到LattePanda的USB 3.0接口
通过HDMI连接显示器
接上Type-C电源适配器供电
开机进入Windows 11系统
用浏览器打开答题卡识别网页

3. 答题卡模板设计

答题卡需要包含以下元素：

四个黑色定位块：分布在四角，用于检测答题卡是否放置到位
考号涂点区域：每行0-9数字，行数=考号位数（支持1-3位）
选择题区域：10道题，每题A/B/C/D四个选项框（22×22像素）

网页内置了答题卡模板预览功能，点击“下载PDF模板”按钮即可生成并打印。

【技术原理与代码分析】
OMR识别原理
光学标记识别（OMR）是一种通过检测纸张上标记区域的明暗变化来读取信息的计算技术。本系统的识别流程如下：

图像采集：通过navigator.mediaDevices.getUserMedia()获取摄像头视频流
图像分析：在指定坐标区域统计黑色像素占比
答案判定：若黑色占比超过阈值（默认22%），判定为已填涂
答案比对：将识别结果与预设标准答案比对，计算得分

核心代码解析获取摄像头视频流

const stream = await navigator.mediaDevices.getUserMedia({
    video: {
        deviceId: deviceId ? { exact: deviceId } : undefined,
        width: { ideal: 640 },
        height: { ideal: 480 }
    }
});
video.srcObject = stream;
复制代码

黑色像素占比检测

function getBlackRatio(imageData, x, y, w, h) {
    const data = imageData.data;
    let dark = 0, total = 0;
    for (let row = y; row < y+h && row<480; row++) {
        for (let col = x; col < x+w && col<640; col++) {
            const idx = (row*640+col)*4;
            const b = (data[idx]+data[idx+1]+data[idx+2])/3;
            if (b < 100) dark++;  // 亮度<100判定为黑色
            total++;
        }
    }
    return total === 0 ? 0 : dark/total;
}
复制代码

考号识别（带唯一性校验）

function recognizeId(imageData) {
    let id = '';
    for (let row = 0; row < idDigits; row++) {
        let ratios = [];
        for (let d = 0; d <= 9; d++) {
            const rect = idRectList.find(r => r.row === row && r.digit === d);
            const ratio = getBlackRatio(imageData, rect.x, rect.y, rect.w, rect.h);
            ratios.push({ digit: d, ratio });
        }
        ratios.sort((a,b) => b.ratio - a.ratio);
        // 最高占比必须 > 0.15，且比次高至少高出0.1，确保唯一涂黑
        if (ratios[0].ratio < 0.15 || ratios[0].ratio - ratios[1].ratio < 0.1) {
            id += '?';  // 无效
        } else {
            id += ratios[0].digit.toString();
        }
    }
    return id;
}
复制代码

布局参数（可自定义）

所有布局参数集中在代码开头的“布局参数”区域，方便调整：

参数	默认值	说明
OFFSET_X	140	选项整体水平偏移
OPT_W / OPT_H	22	选项框尺寸
stepY	38	选项行高
ID_START_Y	30	考号区域起始Y
ID_ROW_HEIGHT	25	考号行高
CORNERS	66/558/402等	四个定位块坐标