做一个刷题小程序-技术圈

今天为大家分享一篇比较有意思的文章，看看无所不能的程序员是如何满足老婆的'刁钻'需求的。^_^

以下是正文：

背景

老婆：难道你不能将机构的pdf的试卷，转换成驾考宝典一样的刷题程序吗？

我：女人你成功引起了我的注意，安排！巴啦啦能量，nodejs给我力量！

今年考公、考编的人真的多。我的老婆也报名了社工（哈哈哈也算是个岸吧）。报了机构最后都有很多份考前密卷，但是这些密卷基本上都是pdf。

习惯了用类似驾考宝典一样的刷题软件，有错题集，有对应解析。同时上班时间，晚上关灯，带娃的时候都能刷题。

需求分析

基本需求

客户端我需要一个客户端接受试卷数据，用驾考宝典的方式展示，答题后展示解析，答错进入错题集。
解析工具
第二我需要一个解析工具将pdf快速转成我需要的数据结构，提供给小程序使用。
~❌后端❌~
为了尽快使用，我们直接将生成的数据放在前端就好了，不然还要再开发一个端，同时会把这个事情做的越来越复杂。

约定数据格式

interface ExamProps {
    name: string; // 考卷信息  
    type: 1 | 2 | 3; // 1-综合能力 2-法规政策 3-工作实务  
    score: number; // 满分  
    time: number; // 考试时间，单位分钟  
    question: {  
        type: 1 | 2 | 3; // 1-单选 2-多选 3-简答  
        options: {label: string; value: number}[]; // 选项  
        score: number; // 分数  
        answer: number | number[] | string; // A-1 B-2 C-3 D-4 E-5 F-6 G-7 H-8  
        analysis?: string; // 答案解析  
        sort: number; // 题目编号  
    }[]  
}

不同端方案

客户端

可选择：H5/PC/小程序/APP

什么端都行其实，小程序和APP体验好一些，相对而言小程序安装个人成本低。所以选择小程序。

将对方加入你个人小程序的开发者或者体验者就好了，也不需要上线。

因为我的客户大人需要的是手机刷题，如果你那边是上班摸鱼，选择PC端最好

解析工具

方案一：手动复制粘贴（臭不要脸！！！hetui）
方案二：AI识别（不识别并羞辱了你😜😜😜）
方案三：OCR技术（开整✨✨✨）

技术方案当然选择前端秘技——node.js(关键我也不会别的啊)

PDF数据转换

实现思路

PDF解析成图片输出
图片文字识别后保存
识别内容转成对应格式

和大象关进冰箱里一样简单😆

从需求到代码

PDF解析成图片输出

使用node-poppler进行pdf操作

const { Poppler } = require('node-poppler');  
const path = require('path');  
const fs = require('fs');  
  
// 创建 Poppler 实例  
const poppler = new Poppler();  
const pdfName = '1';  
const filePath = path.join(__dirname, 'pdf', `${pdfName}.pdf`);  
// 输出图片路径目录  
const outputDir = path.join(__dirname, 'output', `${pdfName}pdf`);  
const outputFilePath = path.join(outputDir, `page`);  
  
const options = {  
    firstPageToConvert: 1,  
    lastPageToConvert: 1,  
    pngFile: true,  
};  
await poppler.pdfToCairo(filePath, outputFilePath, options);

这样我们就将指定页面的pdf转行成图片了，但是这是出现了一个难点！

难点：答案页，一张图是左右排版的，ocr解析会有问题。

如图所示：

所以需要对答案页进行裁剪保存输出图片,其实也简单

先获取总的页面数量

const pageCount = await getPdfPageCount(filePath);

规定需要裁剪的页数

const answerPage = 13 + 1; // 封面 + 13页（纯人工）

裁剪函数

先输出图片，然后使用jimp依赖进行图片裁剪

const Jimp = require('jimp');  
  
const cropImage = async (imagePath, pageIndex) => {  
try {  
    const image = await Jimp.read(`${imagePath}-${pageIndex}.png`);  
    const halfWidth = Math.floor(image.bitmap.width / 2);  

    // 左半部分裁剪  
    await image  
            .clone()  
            .crop(0, 0, halfWidth, image.bitmap.height)  
            .writeAsync(path.join(outputDir, `page-${pageIndex}-1.png`));  

    // 右半部分裁剪  
    await image  
            .clone()  
            .crop(halfWidth, 0, halfWidth, image.bitmap.height)  
            .writeAsync(path.join(outputDir, `page-${pageIndex}-2.png`));  

    console.log(`页面 ${pageIndex} 裁剪成功`);  
    // 删除原图  
    fs.rmSync(`${imagePath}-${pageIndex}.png`)  
} catch (err) {  
    console.error(`页面 ${pageIndex} 裁剪失败:`, err);  
}  
};

循环输出

总结：读取pdf 页数，循环输出每一页的图片，对答案解析页进行裁剪处理。

这就是我们得到的图片了：

### 图片文字识别后保存

因为OCR是个直男，无差别识别，图片上有什么文字都给你识别出来，不管你要不要（喊破喉咙也没用）。

所以我去探究了一下有道云的智能识别，可以划分题目的位置等等。探究了一下，并不是特别的好用，而且免费额度比较少，用不起。

不好用的点：切分题目的只给位置信息不给题目信息，给信息的不切分。据我设想，需要根据位置信息，只能说需求没对上吧~~~

所以直男入选，那么这一步就很简单了，就是识别然后保存下来，下一步再解析。

循环解析图片并保存为json

const fs = require('fs');  
const path = require('path');  
const pdfName = '1';  
const url = 'https://api.textin.com/ai/service/v2/recognize';  
const appId = 'testAppId';  
const secretCode = 'testSecretCode';  
// 图片文件夹路径  
const inputDir = path.join(__dirname, `output/${pdfName}pdf`);  
const outputDir = path.join(__dirname, `output/${pdfName}pdf`);  
  
async function processImages() {  
const imageFiles = fs.readdirSync(inputDir).filter(file => /\.(jpg|jpeg|png|bmp)$/i.test(file));  
  
let allResults = [];  
  
for (const file of imageFiles) {  
    const imagePath = path.join(inputDir, file);  
    console.log(`Processing ${imagePath}...`);  
    // ocr识别  
    const itemList = await sendRequest(url, appId, secretCode, imagePath);  
    allResults = allResults.concat(itemList?.map(item=> item.text));  
}  
  
// 将结果保存为 JSON 文件  
const outputFilePath = path.join(outputDir, 'result.json');  
  
fs.writeFileSync(outputFilePath, JSON.stringify(allResults, null, 2));  
console.log(`All results saved to ${outputFilePath}`);  
}

得到的数据如图所示

ocr对接
用的是textin的ocr技术
发送请求解析图片

async function sendRequest(url, appId, secretCode, imagePath) {  
try {  
    const image = fs.readFileSync(imagePath);  
    const response = await axios.post(url, image, {  
        headers: {  
            'Content-Type': 'application/octet-stream',  
            'x-ti-app-id': appId,  
            'x-ti-secret-code': secretCode  
        }  
    });  

    if (response.status === 200) {  
        const ret = response.data;  
        return ret.result ? ret.result.lines : [];  
    } else {  
        console.error(`Request failed with status code ${response.status}`);  
        return [];  
    }  
} catch (error) {  
    console.error('Request failed:', error);  
    return [];  
}  
}

总结：我们已经将pdf转成图片并且识别到了图片中的所有文字（胜利在望）

最后一步我们就需要处理这些文字了

首先我们要发觉这些文字的规律，还有其中多余的文字，以及如何解析出题目、选项、关联答案（答案是分开的）

规律如下：

1.去掉第,${number}页、第${number}页这样的文字
2.匹配到""参考答案"后进入答案解析部分
3.每个题目前面都有序号，选项在两个题目之间
4.每个答案前面都有序号，与题目序号相同

把这些规律交给GPT，让GPT帮你写一段解析代码，输出你想要的格式，这样就大功告成了，

客户端对各位大佬都是洒洒水啦就不班门弄斧了。

最后效果是这样的：

这UI设计真是简约而不简单呢，哈哈哈

原文：https://juejin.cn/post/7397588804825022518

作者：可汗