图像 OCR 实战:实现图片文字提取功能(HarmonyOS 5.0.0+)_鸿蒙页面文本提取
适配 HarmonyOS 5.0.0 或以上版本:
🔍 图像 OCR 实战:实现图片文字提取功能(HarmonyOS 5.0.0+)
你是否想过:
拍一张纸质讲义,自动识别上面的文字?
截图一段通知,立即提取文字用于复制/翻译?
本篇将教你构建鸿蒙设备上的图像 OCR 系统:
✅ 加载本地图片(或拍照)
✅ 使用鸿蒙原生 OCR 能力识别文字
✅ 输出识别文本(可复制、展示)
✅ 全程离线运行,无需联网或云服务
✅ 核心模块(HarmonyOS 5+)
@ohos.ai.cv.text
@ohos.file.fs
+ ArkTS UI🎯 使用场景举例
-
文档扫描器(手写/打印体文字提取)
-
学生拍题识字助手
-
通知识别 + TTS 播报
-
屏幕截图辅助复制/翻译
📦 Step1:导入并初始化 OCR 模块
import text from \'@ohos.ai.cv.text\'let ocrClient: text.TextDetectorasync function initOCR() { ocrClient = await text.createTextDetector()}
📦 Step2:调用识别方法
async function detectText(path: string): Promise { return await ocrClient.detectText(path)}
返回示例结果:
[ { text: \'欢迎使用鸿蒙图像识别\', boundingBox: { x: 120, y: 80, width: 280, height: 32 } }, ...]
📦 Step3:UI 显示图像 + 文本框结果
@Entry@Componentstruct OCRDemo { @State path: string = \'/data/media/sample_text.jpg\' @State texts: text.TextDetectionResult[] = [] async aboutToAppear() { await initOCR() this.texts = await detectText(this.path) } build() { Column() { Stack() { Image(this.path).width(\'100%\').height(400).objectFit(ImageFit.Contain) ForEach(this.texts, t => ( Blank() .width(t.boundingBox.width) .height(t.boundingBox.height) .position({ x: t.boundingBox.x, y: t.boundingBox.y }) .border({ width: 1, color: Color.Red }) )) } Text(\'识别结果:\').fontSize(20).padding(10) ForEach(this.texts, t => ( Text(t.text).fontSize(16).lineHeight(22).padding(4) )) } .padding(16) }}
✅ 拓展能力建议
⚠️ 注意事项(HarmonyOS 5.0.0+)
-
图片应为 JPG、PNG 格式,推荐大小控制在 1080px 内
-
检测耗时与图片大小/文字量成正比,建议加入 loading
-
手写识别支持有限,建议优先用于打印体场景
-
部分字符可能识别不完整,可结合模型优化或后处理规则增强效果
🧩 小结
你已实现完整的鸿蒙图像文字识别能力:
-
初始化原生 OCR 模块
-
加载本地图像文件并检测文字
-
返回每条文字的内容 + 位置信息
-
在 UI 中进行展示 + 视觉高亮
这是构建 AI 扫描助手、图文识别系统、教育拍题工具的核心基础。
📘 下一篇预告
第7篇:AI 图像裁剪助手——智能识别主体并自动裁切图片
我们将结合图像识别与图像处理模块,构建一个智能裁图系统,自动识别图片中“最重要的区域”,并裁剪输出。