【听见课堂 HarmonyOS NEXT 实战系列 38】原图与识别文本对照:OCR 复核页如何降低误保存

OCR 最危险的界面不是识别失败,而是只显示一段看似完整的文字,让用户无法快速对照原图。课堂公式、上下标、专业名词和板书箭头尤其容易出现“读起来通顺、实际写错”的结果。

听见课堂 P06 把 OCR 文本定义为可编辑草稿,同时保留真实原图或本地示例。手机使用“对照/原图”切换,大屏使用并列工作区;旋转、重置、复制和课堂时间都围绕同一份当前页状态工作。本文拆解这套复核体验及其边界。

原图、识别文本与人工修订组成的对照复核工作区

一、OCR 结果为什么必须可编辑

TextArea 绑定 ocrText,用户修改时清除旧提示。识别结果不是只读结论,人工校正是保存前的正式步骤。

空文本不能保存,修改成功后 Repository 写入的也是用户确认文本。

二、真实图片和示例要显示不同标识

scanImageUri.length > 0 时显示“图片”,否则显示“示例”。用户能判断当前对照对象是否来自真实拍照/图库。

这避免本地公式演示被误认为当前相机识别结果。

三、手机为何采用分段切换

窄屏同时放两个完整栏会让图片和文本都过小。P06 手机页提供“对照”和“原图”按钮,根据 isOcrOriginalView 切换内容。

分段控件保持 48vp 触达高度,用户可以在编辑文本与查看大图之间快速往返。

四、对照模式仍保留双信息

在“对照”状态中,编辑区占更大权重,原图或示例占较小区域。用户输入时仍看得到来源内容,而不是完全凭记忆修改。

长文本通过 TextArea 内部滚动处理,原图使用 ImageFit.Contain 避免裁掉边缘公式。

五、大屏为何采用并列工作区

2in1 页面同时展示识别结果、原图和检查面板。屏幕空间允许用户不切换视图即可完成比对,减少频繁往返。

布局 Builder 不同,但 ocrText、当前页、旋转角度和保存动作完全共享。

六、旋转只影响预览

this.ocrPreviewRotation = (this.ocrPreviewRotation + 90) % 360;

旋转用于阅读横拍或倒置图片,不修改原始文件,也不重新调用 OCR。反馈显示当前角度,让用户知道操作已生效。

七、重置恢复当前页原始结果

this.ocrText = this.currentOcrOriginalText();
this.ocrPreviewRotation = 0;

重置会撤销当前页面草稿修改并恢复旋转。它没有写库,因此属于可逆操作。

真实图片时 currentOcrOriginalText() 返回当前 ocrText 的实现值得继续审查:若没有单独保存初始 OCR 文本,修改后再重置可能无法真正恢复最初结果。

八、复制操作有空态和失败态

复制前先 trim();没有内容时提示“没有可复制的识别文字”。调用系统剪贴板失败时提示手动选择文字,不显示假成功。

剪贴板是外部系统状态,Promise 完成后才能报告成功。

九、上一页/下一页要同步对照对象

切页时不仅换 ocrText,还要换来源、课堂时间并把旋转归零。否则左栏和右栏会来自不同记录。

页码文案和工具反馈共同说明当前上下文。

十、错误卡不能遮住人工入口

OCR 失败时,错误说明位于复核面板内,TextArea 仍可编辑,原图仍可查看。错误状态不应覆盖整个页面,让用户失去修正机会。

颜色之外还要有明确文字,保证高对比和读屏可理解。

手机切换式对照与 2in1 并列工作区的响应式映射

十一、无图片时如何对照

本地示例或已有记录没有临时 URI,页面用结构化纸张卡片显示 currentOcrOriginalText()。这不是原图,而是明确的示例/本机记录视图。

视觉结构保持一致,证据等级则由标签和来源区分。

十二、低清图片需要拍摄建议

对照页能帮助发现错误,但无法让模糊像素变清楚。P05 应提示完整入框、保持稳定,P06 失败时允许返回重拍或换图。

未来可以增加缩放和局部放大,但不能用锐化效果假装恢复了不存在的文字细节。

十三、长文本和大字号要共同验收

大字号下标题、错误卡、TextArea 和工具栏会竞争空间。手机页必须保持纵向滚动和底部安全区,大屏页要避免固定高度截断文本。

可访问性验收不能只用短公式示例。

十四、保存反馈要说明写到哪里

页面区分“真实图片 OCR 记录已保存到课堂回顾”和“文字修正已保存到本机数据库”。反馈包含目标,不只显示一个绿色勾。

原图不会上传,也不会随文字进入数据库。

十五、当前视觉证据

P05/P06 设计对照报告确认手机结构、对照/原图切换、工具栏和时间关联可运行;联系表裁片与真机画布比例不同,所以像素差异指标只用于诊断,没有被冒充为严格 100% 还原。

真实图片 OCR 成功与长文本压力仍待真机验证。

十六、验收清单

用正确文本、错别字、空结果、长公式、横拍图、无图片示例和两页记录验证:编辑、切换、旋转、重置、复制、切页、空态、保存和重启回读。

重点检查“重置是否真能恢复初始 OCR 文本”,因为当前真实图片路径没有独立原始结果快照。

十七、总结

复核页的价值不是把 OCR 结果排得漂亮,而是让用户看得见来源、改得动内容、理解当前页,并在写库前完成确认。听见课堂已经形成手机和大屏两套对照布局,下一步仍需补初始 OCR 快照与真图长文本证据。

下一篇将把复核结果放回课堂时间线:来源字符串和证据时间如何帮助复盘页重建上下文。

参考:项目 ocrComparePanel()ocrReviewCompactPage()ocrReviewLargePage()、P05/P06 视觉还原映射与设计对照验收报告。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐