Python+OpenCV实现材料表面缺陷检测：从阈值分割到结果输出
2026/9/23 15:43:05
简介：面向课堂随机提问与互动点名场景，这款HTML随机点名器让教师或主持人通过导入txt名单即可完成公平抽选，避免人工滚动名单的低效。工具基于HTML+JavaScript实现，核心演示FileReader API读取外部文本、按行拆分生成数组、再通过随机索引抽取名字并实时显示在页面上，包含普通随机点名与不重复随机点名两种模式，逻辑清晰简洁，适合网页设计初学者参照学习。压缩包共7个文件，包含4个HTML页面、2个不同编码（GBK/UTF-8）的txt名单示例以及1个JS逻辑文件，整体体积仅11KB，轻量实用。已有318人学习下载。读者拿到后可直接运行并替换名单使用，也可逐行阅读代码理解浏览器端文件交互、DOM操作与事件监听的实际应用，在此基础上还能自行扩展为更丰富的交互效果，是课程设计或教辅工具的良好起步模板。
1. 随机点名器不是随机数生成器，txt名单才是真正的入口
「网页设计-html-随机点名器（txt文档导入名字）」看着是个小作业，实际在课堂和培训现场用起来才知道：麻烦的根本不是那个「点一下出名字」的按钮，而是你手里那份txt名单往往带着一堆历史包袱——Excel导出来可能是逗号分隔的一长串，微信里复制过来可能是全角空格加重复行，Windows记事本存的中文还可能乱码。这个项目要做的，是让老师、讲师、活动主持人拿一个浏览器就能开页、选txt、点名字，一堂课下来不重不漏、刷新不丢状态。适合HTML和JavaScript刚入门、想做一个「真能拿去用」的练习的读者，也适合不想装任何软件、只想有个本地工具的从业者。下面我按自己实际搭这套页面的顺序讲，从最小可跑版本一直说到踩过的坑。
2. 先跑通最小页面：HTML结构、样式与FileReader读取txt
2.1 为什么是「用户自己选文件」，而不是直接读路径
很多人第一次做这个需求，第一反应是「在输入框里填一个txt的路径，页面去读它」。这个思路在浏览器里走不通。出于安全策略，网页脚本没有权限无感访问用户电脑的任意文件系统，拿不到绝对路径下的文件内容。浏览器给的标准方案是File API：用户通过<input type="file">主动选择文件，页面拿到File对象，再用FileReader把内容读出来。这个交互用在点名器上并不别扭——打开网页、选名单、开始点名，正好是上课前的自然动作。
选文件时加上accept=".txt,text/plain"，系统弹窗会预先过滤掉非txt的文件，减少选错的可能。另外注意<input>每次选择同一个文件也会触发change事件，所以不需要刻意清空value字段，正常监听就够了。
还有人会问：<input type="file">的value里不是有路径吗？为什么不能直接拿来用？现代浏览器出于安全考虑，value里返回的是一个类似C:\fakepath\xxx.txt的伪路径，既拿不到真实磁盘位置，也读不了内容。这条野路子在老IE时代也许能用，现在的浏览器环境里彻底没戏，老老实实用FileReader是唯一稳的读法。
2.2 最小页面：一份能直接双击打开的HTML
我一般把整个点名器做成一个单文件HTML，CSS和JavaScript全部内联。好处是不需要服务器、不需要构建工具，双击文件就能在浏览器里打开，拷给同事也能用。最小版本先解决三件事：展示区、导入按钮、点名按钮。代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>随机点名器</title> <style> body { font-family: "Microsoft YaHei", sans-serif; max-width: 640px; margin: 40px auto; text-align: center; } #current { font-size: 72px; margin: 30px 0; min-height: 90px; line-height: 1.2; color: #333; } button { font-size: 18px; padding: 10px 28px; margin: 6px; border: none; border-radius: 8px; background: #2f6fed; color: #fff; cursor: pointer; } button:disabled { background: #bbb; cursor: not-allowed; } </style> </head> <body> <h2>随机点名器</h2> <p id="fileInfo">请先导入txt名单</p> <div id="current">-</div> <input id="fileInput" type="file" accept=".txt,text/plain"> <button id="pickBtn" disabled>点名</button> <button id="resetBtn">重新开始本轮</button> <script> const fileInput = document.getElementById('fileInput'); const pickBtn = document.getElementById('pickBtn'); const resetBtn = document.getElementById('resetBtn'); const currentEl = document.getElementById('current'); const fileInfo = document.getElementById('fileInfo'); let names = []; // 当前名单 let queue = []; // 本轮抽取队列 fileInput.addEventListener('change', e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => { names = ev.target.result.split(/[\r\n]+/).filter(n => n.trim()); queue = [...names]; fileInfo.textContent = '已载入 ' + file.name + '，共 ' + names.length + ' 人'; pickBtn.disabled = names.length === 0; }; reader.readAsText(file); }); pickBtn.addEventListener('click', () => { if (queue.length === 0) { currentEl.textContent = '本轮已点完'; pickBtn.disabled = true; return; } const idx = Math.floor(Math.random() * queue.length); currentEl.textContent = queue[idx]; queue.splice(idx, 1); }); resetBtn.addEventListener('click', () => { queue = [...names]; pickBtn.disabled = names.length === 0; currentEl.textContent = '-'; }); </script> </body> </html>这个版本已经能完成「导入txt → 从名单里随机抽一个 → 抽过的不再出现」的基本闭环。注意split(/[\r\n]+/).filter(n => n.trim())是按换行拆分再过滤空行，Windows记事本的\r\n和Mac/Linux的\n都能兼容，这是导入环节的第一道防线。
2.3 代码拆开讲：文件读取、事件对象与按钮状态
FileReader.readAsText是读取本地文本文件的标配方法。它接收一个File对象，在onload回调里用ev.target.result拿到字符串。注意这里用ev.target而不是this，虽然在这个例子里两者效果一样，但一旦你把回调抽成独立函数、或者在外面套一层数组方法，this的指向就会变，这是JS初学者最容易莫名其妙踩的坑。为了稳，我统一用事件对象取结果。
名单解析这行的逻辑是：先按换行拆成数组，再过滤掉空行。它解决了「换行不一致」和「文件末尾多一个空行」两个问题，但对「一行多个名字」的情况无能为力——如果txt里写的是「张三、李四、王五」，这个最小版本会把整行显示成一个名字。这个问题的完整解法放在下一章。
抽取部分用的是splice：每次从queue里随机取一个下标，把名字显示出来，同时从queue里删除。这样「随机」和「一轮不重复」两个要求同时满足。代价是每次点名都要splice一次，但名单通常只有几十上百人，性能完全不是问题。如果你追求更优雅的写法，可以把splice换成洗牌加pop，我后面讲到点名逻辑时会细说。
CSS方面我只做三件事：名字字号给到72px，让后排能看清；按钮禁用状态用灰色区分；页面宽度限制在640px，投影时不至于排版乱掉。这些在实际场景里都是刚需。至于为什么不用UI框架——点名器这种工具最重要的属性是「在任何装有浏览器的电脑上都能立刻打开」，内联的单文件HTML不依赖CDN、不走网络，比引一套框架稳得多，尤其是在教室网络不稳定的情况下。
3. 把txt名单变成干净名单：多分隔符解析、去重与编码处理
3.1 你拿到的txt，比你想象的脏得多
点名器的核心食材是txt名单。问题在于，这份txt往往不是人手敲出来的，而是从Excel导出、从企业微信聊天记录里复制、从HR系统里下载的。来源决定了它的格式：Excel装进txt可能是一行一个名字，也可能整段粘成一行；从Word表格复制可能是制表符分隔；有人图省事会在一条里写「张三、李四、王五」用顿号分隔；甚至有人用半角逗号或空格隔开。如果只用换行拆分，遇到「一行多个名字」的文件，点名器会把「张三、李四、王五」当成一个完整的人显示出来。
所以我现在做这一套页面时，解析策略是分层处理：先按换行拆成行；如果整份内容只有一行，就按常见分隔符（中文顿号、半角逗号、全角逗号、空格、制表符）尝试拆分。这是「先试换行、分成多行后再看要不要二次拆分」的顺序，能覆盖我见过的绝大多数名单文件。
还有一类文件也常见：从老系统导出的txt，开头带着一个看不见的BOM头（\uFEFF），如果不处理，第一个名字前面会多一个隐形字符，导致页面显示正常、去重却失效。这个坑很小，但遇上了很懵，顺手在清洗里统一去掉。
3.2 清洗函数：一个parseNames就搞定大部分脏数据
把清洗逻辑从事件回调里抽出来，单独成一个函数。将来要扩展格式（比如支持CSV、支持跳过表头）就不用动主流程。代码如下：
function parseNames(raw) { // 去掉UTF-8 BOM头，防止第一个名字前面多出隐形字符 let text = raw.replace(/^\uFEFF/, ''); // 统一把 \r\n 和 \r 换成 \n，避免Windows换行干扰后续处理 text = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n'); let lines = text .split('\n') .map(line => line.trim()) .filter(line => line.length > 0); // 如果拆分后只有一行，说明对方可能是用分隔符写的，尝试二次拆分 if (lines.length === 1) { lines = lines[0] .split(/[、,，;；\t\s]+/) .map(s => s.trim()) .filter(s => s.length > 0); } // 去重，保持第一次出现的顺序 const seen = new Set(); const result = []; for (const name of lines) { if (!seen.has(name)) { seen.add(name); result.push(name); } } return result; }这个函数处理了四类真实脏数据，按顺序说。
第一，BOM头。开头那句replace(/^\uFEFF/, '')在UTF-8 with BOM的txt上会静默去掉头字符，否则「张三」可能变成「\uFEFF张三」，显示看不出区别，但用Set去重时它是另一个字符串，会让同一个人出现两次。这个坑特别隐蔽，我建议保留这行代码当保险。
第二，换行统一。\r\n和\n混在一起时，直接split('\n')会在每行末尾残留一个\r，页面显示成带尾巴的「张三\r」。先统一换行符，后面就干净了。
第三，空行和首尾空白过滤。每行trim()后，空行会被挡掉。名字前后的半角空格和全角空格也会在这一步被去掉，避免产生「张三」和「 张三 」两个看似不同、实际同一个人的记录。注意这里只处理首尾空白，不处理名字内部的空格——「张 三」这种复姓加空格的情况，内部空白去掉反而误伤，保持原样是更稳妥的策略。
第四，单行分隔符尝试拆分。split(/[、,，;；\t\s]+/)一次处理中文顿号、半角逗号、全角逗号、分号、制表符和连续空白。这个正则里包含了\s会匹配空格，所以它只建议在确认整份文件是一行的时候用。对多行文件也这样做会把「张 三」拆成「张」和「三」，造成误伤，这也是我把这个分支放在lines.length === 1条件里的原因。
去重用Set并保持原顺序。点名器的名单去重是硬需求，不然一个名字反复出现，抽中概率就被放大了。注意去重必须在拆分之后做，顺序反了会让「张三」「张 三」（全角空格）这种同人不同写法无法被归一。
3.3 编码问题：乱码不是改几行代码就能绕开的
这一步是整个txt导入链路里最大的一个坑。Windows记事本默认的「ANSI」编码保存中文，实际是GBK；而浏览器默认用UTF-8解码，GBK的中文就变成「寮犱笁」「锟斤拷」这种乱码。乱码一旦发生，从源头看是编码没对上，不是代码逻辑错误。
我在实现里用的是「提示优先、兜底为辅」的双层策略。第一层是引导：在页面上放一行提示「推荐将txt另存为UTF-8编码」，老师只要按这个提示操作，整个链路就不会有编码问题。第二层是容错：在读取时对内容做一次检查，如果发现替换字符\uFFFD，说明UTF-8解码失败了，这时用reader.readAsText(file, 'GBK')强制按GBK再读一次。
代码大概长这样：
fileInput.addEventListener('change', e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { let text = reader.result; if (text.includes('\uFFFD')) { const readerGBK = new FileReader(); readerGBK.onload = () => { names = parseNames(readerGBK.result); afterLoaded(file.name); }; readerGBK.readAsText(file, 'GBK'); return; } names = parseNames(text); afterLoaded(file.name); }; reader.readAsText(file, 'UTF-8'); });需要提醒的是，浏览器对GBK解码的支持取决于运行环境。Chromium内核的浏览器基本都能解析GBK，但部分开源内核或老版本浏览器对GBK的支持不稳定，所以「乱码检测 + 换编码重读」只作为兜底手段，不能作为唯一依赖。把「另存为UTF-8」的提示放在页面上，让用户从源头规避，永远比事后补救省心。
4. 点名逻辑怎么写：洗牌抽取、防重复与刷新不丢状态
4.1 为什么「纯随机」在点名场景里体验很差
如果点名器每次都用Math.random()在整个名单里独立抽一次，从概率上讲是公平的，但从课堂体验上讲非常糟糕：上节课刚点过的张三，这节课第一下又抽到他，学生就会起哄「怎么又是他」。产生这个现象的原因很简单——独立随机没有记忆，连续两次抽到同一个人的概率是1/N（N是总人数），班级30人时这个概率约3.3%，一个学期下来一定会遇到几次。
点名器真正要实现的是「一轮之内不重复，一轮结束后重置」。这个需求用「洗牌 + 依次弹出」的模型来实现最自然：把整个名单洗成随机顺序，然后像抽扑克牌一样一张一张拿，拿完就重洗。这样学生能感知到公平，老师也不用额外记「上次点过谁」。
4.2 用Fisher-Yates洗牌代替下标随机
最常见的洗牌写法是Fisher-Yates算法，从后往前遍历，每次把当前位置的元素和一个随机位置交换。它比「随机sort」要稳得多，时间复杂度O(n)，每种排列出现的概率理论上是均等的。代码实现如下：
function shuffle(list) { const arr = [...list]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }这里的[...list]是浅拷贝，保证洗牌不修改原始名单。交换写法用了ES6的数组解构，[arr[i], arr[j]] = [arr[j], arr[i]]在一行里完成交换。循环里j的范围是0到i，包含i本身，这保证了每个位置都有机会保持不变，才是真正的随机交换。如果误写成Math.floor(Math.random() * i)，会少一种排列情况，这是洗牌算法里最常见的翻车点，虽然概率结果偏差不大，但既然写算法就写对。
每次点名从洗牌后的队列尾部弹出：
const current = queue.pop();pop比splice更高效，而且队列越抽越短，天然提供「这轮还剩多少人没点」的信息。等到队列空了，页面提示「本轮已全部点完」，点「重新开始」就会重新洗牌开新的一轮。
4.3 刷新不丢状态：把名单、队列和已点名单都存进localStorage
老师上课的现场环境很复杂：电脑休眠唤醒、误关标签页、投影仪切换导致页面刷新。如果每次刷新都要重新选txt、重新开始，点名器的可用性会大打折扣。解决办法是持久化，把关键状态存进localStorage。
function saveState() { try { localStorage.setItem('roll_names', JSON.stringify(names)); localStorage.setItem('roll_queue', JSON.stringify(queue)); localStorage.setItem('roll_picked', JSON.stringify(picked)); } catch (e) { // 隐私模式下写入可能被拒绝，吞掉异常，页面功能照常 } } function loadState() { try { const n = JSON.parse(localStorage.getItem('roll_names')); const q = JSON.parse(localStorage.getItem('roll_queue')); const p = JSON.parse(localStorage.getItem('roll_picked')); if (Array.isArray(n) && n.length > 0) { names = n; queue = Array.isArray(q) && q.length > 0 ? q : [...n]; picked = Array.isArray(p) ? p : []; return true; } } catch (e) { // 解析失败就当作没有历史状态，重新走导入流程 } return false; }localStorage的特点是纯字符串存储、同源共享、刷新不丢。用JSON.stringify把数组序列化成字符串存进去，读取时JSON.parse还原。有三个细节值得注意。
第一，保存的内容分成三份：完整名单、当前抽取队列、已点名单。只存队列不存名单的话，刷新后虽然能继续点，但没有办法做「重新开始本轮」，因为原始名单丢了。所以names必须也存一份。
第二，loadState里用try/catch包住整个解析过程。如果用户浏览器存储被清空、或者存了损坏数据，JSON.parse会抛异常，这时候不应该让页面报错，而是回落到「未导入名单」的初始状态，让用户重新选txt。
第三，隐私模式下localStorage在某些浏览器里会受限甚至抛异常，所以saveState里对setItem的调用也包了一层try/catch，避免页面白屏。
4.4 已点名单怎么展示才不尴尬
点名时只显示当前名字，学生心里没底。我的习惯是在页面下方保留一个「本轮已点」区域，动态渲染成小标签。这个功能看起来简单，但有一个隐藏的边界：页面刷新后，picked里有历史记录，渲染的时候要把上一次会话的历史一起显示出来，不能每次刷新都从空列表开始。做法是在loadState成功后立即调用一次渲染函数，再在每次点名后追加渲染，和saveState配套使用。
渲染逻辑我放在独立的renderPicked()函数里，用document.createElement('span')逐个追加，而不是用innerHTML拼字符串。原因前面提到过：名单可能来自外部txt，里面如果混入<img src=x onerror=...>之类的字符串，innerHTML会直接执行它，这是典型的XSS注入面。点名器虽然是本地工具，但名单来源不可控，养成这个习惯没坏处。
5. 避坑清单：从导入txt到点名结束容易翻车的5个现场
点名器看着只有「选文件、点按钮」两个动作，但把导入、存储、编码、概率、回调串起来，坑不少。下面按我踩过的顺序列出5条，每条都按现象、原因、解决三步说清楚。
5.1 中文全变乱码：不是代码坏了，是编码没对上
现象：导入后页面显示「寮犱笁」「锟斤拷」这类乱码，英文和数字正常，只有中文坏。
原因：txt文件是Windows记事本默认的ANSI（GBK）编码保存的，而浏览器用UTF-8解码，编码集合不匹配。这不是JavaScript逻辑问题，是字符集不匹配造成的解码错误。
解决：两个层面。工具层，在读取时检测替换字符\uFFFD，发现后用reader.readAsText(file, 'GBK')强制按GBK重读，这一招在Chromium内核浏览器里对老txt文件基本立竿见影。习惯层，在页面上提示用户把txt另存为「UTF-8」编码，绝大多数文本编辑器都支持，这是从源头消灭问题。我一般两层都做，先提示一次，再做一次乱码检测兜底。
5.2 名单里混进空行和重复，点名时出现「空白」或概率不均
现象：点出来的名字区域偶尔是空的；或者统计后发现某个学生被点到的次数明显偏高，学生质疑公平性。
原因：txt里存在空行、文件末尾多了一个换行、同一人出现多次。最初用split('\n')直接拆分，空行会被当成一个合法名字存进数组；重复名字没去重，反复出现的名字占了下标位，抽中概率被等比例放大。
解决：统一走第3章的parseNames清洗流程——先过滤空行和首尾空白，再用Set去重。注意去重必须在按分隔符拆分之后做，顺序反了会让「张三、张 三」这种同人不同写法无法合并。这一类问题属于数据层，不在逻辑层，只在点名按钮上打补丁是救不回来的。
5.3 onload回调里的this指向变了，报错找不到变量
现象：把读取逻辑封装成单独函数后，reader.onload = function() { doSomething(this.result) }，控制台报this.result is undefined或doSomething is not defined。
原因：onload是事件回调，回调里this的指向取决于它被谁调用，而不是它在哪定义。在function(){}里用this，拿到的不一定是FileReader实例；如果代码里用了严格模式，this甚至可能是undefined。
解决：统一用箭头函数reader.onload = ev => { ... }，箭头函数不绑定自己的this，直接引用外层变量访问reader.result。更稳妥的写法是用事件对象：reader.onload = ev => { const text = ev.target.result }。我现在的代码风格是从不在事件回调里用this，一律通过事件对象的target字段取值，这个习惯帮我少踩了无数回调坑。
5.4 老抽到同一个人，点名器被学生质疑有内幕
现象：点名几次后发现总落在相同几个人身上，师生认为算法有黑幕，课堂气氛变紧张。
原因：Math.random()每次都是独立抽样，没有记忆。课堂样本量小，连抽重复其实是概率的必然，不是算法出故障，但它非常消耗公信力——学生感知不到概率，只能感知到「怎么又是他」。
解决：改成第4章的洗牌队列，一人一轮只出现一次。把「已点名单」实时展示在页面上，点过的人一眼可见，是消除质疑最有效的方式。如果名单在50人以上，我还会在「重新开始本轮」时给按钮加一次confirm确认弹窗，防止老师误触重置后，学生认为上一轮记录被刻意抹掉了。
5.5 刷新后状态全丢，不得不重新导入一遍txt
现象：上课途中断电、误刷新，回来发现名单没了，又要从文件管理器里重新选一遍txt。
原因：所有状态都存在JavaScript变量里，浏览器刷新后内存数据全部清空。初始实现没做持久化，这是整个点名器体验上最大的一块短板。
解决：用localStorage持久化三份数据：names完整名单、queue抽取队列、picked已点名单。页面加载时先尝试恢复，恢复成功就直接跳到点名界面。配套做法是给「重新开始」按钮加confirm确认弹窗，防止误触重置把整轮记录清掉。具体代码在4.3已经给出，直接参考即可。
6. 进一阶玩法：把点名器改成小组分组器，顺带验证随机性
点名器做完，很多课堂的下一个需求是分组。其实不用另做页面，洗牌后的队列本身就是分组的产物——每N个人一组，按顺序切片就行。
function pickGroups(queue, size) { const groups = []; for (let i = 0; i < queue.length; i += size) { groups.push(queue.slice(i, i + size)); } return groups; }调用时const groups = pickGroups(shuffle(names), 4)，一次生成4人一组的小组，最后一组不够4人也照常生成，不会丢人。这个函数的核心在于它接收的queue是洗牌后的，如果直接传原名单，每个小组的成员顺序每次固定，分组效果会变差。
再进阶一点，可以加上语音播报。浏览器自带的SpeechSynthesis接口支持中文朗读，点中名字后用speechSynthesis.speak把名字读出来。要注意一点：能不能读出中文取决于操作系统装没装中文语音包，Windows 10以上默认有简体中文语音，Mac也有，但部分精简版系统没有。这是典型的「在你电脑上好好的，换个电脑就无声」的玄学现场，做之前先确认目标机器，别在开课当天才发现。
最后说验证随机性的方法。在浏览器控制台里跑一段模拟代码，对点名器做一万次模拟，统计每个名字被抽中的次数：
const counter = {}; const mock = ['张三', '李四', '王五', '赵六', '孙七']; for (let i = 0; i < 10000; i++) { const idx = Math.floor(Math.random() * mock.length); counter[mock[idx]] = (counter[mock[idx]] || 0) + 1; } console.table(counter);如果每个名字的计数都在10000/5附近浮动，说明随机逻辑没有系统性偏差；如果某个名字显著偏离，就回去检查洗牌算法里的取模范围是不是写错了。
我的习惯是每次改完点名器，先造一份30人的测试txt，跑一遍「导入 → 点完一整轮 → 重开第二轮」，再刷新页面确认状态恢复，最后才拿进真课堂。这套流程帮我挡掉过不少开课前的尴尬。点名器这种工具，稳定比花哨重要得多，把最常用的路径做到不翻车，比堆功能更值得投入。希望帮到你。
本文还有配套的精品资源，点击获取