OpenHarmony集成OCR三方庫實現文字提取

1. 簡介

Tesseract(Apache 2.0 License)是一個可以進行圖像OCR識別的C++庫，可以跨平臺運行。本樣例基于Tesseract庫進行適配，使其可以運行在OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）上，并新增N-API接口供上層應用調用，這樣上層應用就可以使用Tesseract提供的相關功能。

2. 效果展示

動物圖片識別文字

身份信息識別

提取文字信息到本地文件

3. 目錄結構

4. 調用流程

調用過程主要涉及到三方面，首先應用層實現樣例的效果，包括頁面的布局和業務邏輯代碼；中間層主要起橋梁的作用，提供N-API接口給應用調用，再通過三方庫的接口去調用具體的實現；Native層使用了三方庫Tesseract提供具體的實現功能。

5. 源碼分析

本樣例源碼的分析主要涉及到兩個方面，一方面是N-API接口的實現，另一方面是應用層的頁面布局和業務邏輯。

N-API實現

1. 首先在index.d.ts文件中定義好接口

/*** 初始化文字識別引擎* @param lang 識別的語言, eg:eng、chi_sim、 eng+chi_sim,為Null或不傳則為中英文（eng+chi_sim）* @param trainDir 訓練模型目錄，為Null或不傳則為默認目錄** @return 初始化是否成功 0=>成功，-1=>失敗*/
export const initOCR: (lang: string, trainDir: string) => Promise<number>;export const initOCR: (lang: string, trainDir: string, callback: AsyncCallback<number>) => void;/*** 開始識別* @param imagePath 圖片路徑（當前支持的圖片格式為png, jpg, tiff）** @return 識別結果*/
export const startOCR: (imagePath: string) => Promise<string>;
export const startOCR: (imagePath: string, callback: AsyncCallback<string>) => void;/*** 銷毀資源*/
export const destroyOCR: () => void;

代碼中可以看出N-API接口initOCR和startOCR都采用了兩種方式，一種是Promise，一種是Callback的方式。在樣例的應用層，使用的是它們的Callback方式。

2.注冊N-API模塊和接口

EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports) {
napi_property_descriptor desc[] = {
{
"initOCR", nullptr, InitOCR, nullptr, nullptr, nullptr, napi_default, nullptr
},
{
"startOCR", nullptr, StartOCR, nullptr, nullptr, nullptr, napi_default, nullptr
},
{
"destroyOCR", nullptr, DestroyOCR, nullptr, nullptr, nullptr, napi_default, nullptr
},
{
};
napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
return exports;
}
EXTERN_C_ENDstatic napi_module demoModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_register_func = Init,
.nm_modname = "tesseract",
.nm_priv = ((void *)0),
.reserved = {
0
},
};extern "C" __attribute__((constructor)) void RegisterHelloModule(void) {
napi_module_register(& demoModule);
}

通過nm_modname定義模塊名，nm_register_func注冊接口函數，在Init函數中指定了JS中initOCR，startOCR，destroyOCR對應的本地實現函數，這樣就可以在對應的本地實現函數中調用三方庫Tesseract的具體實現了。

3.以startOCR的Callback方式為例介紹N-API中的具體實現

static napi_value StartOCR(napi_env env, napi_callback_info info) {OH_LOG_ERROR(LogType::LOG_APP, "OCR StartOCR 111");size_t argc = 2;napi_value args[2] = { nullptr };//1. 獲取參數napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);//2. 共享數據auto addonData = new StartOCRAddOnData{.asyncWork = nullptr,};//3. N-API類型轉成C/C++類型char imagePath[1024] = { 0 };size_t length = 0;napi_get_value_string_utf8(env, args[0], imagePath, 1024, &length);addonData->args0 = string(imagePath);napi_create_reference(env, args[1], 1, &addonData->callback);//4. 創建async worknapi_value resourceName = nullptr;napi_create_string_utf8(env, "startOCR", NAPI_AUTO_LENGTH, &resourceName);napi_create_async_work(env, nullptr, resourceName, executeStartOCR, completeStartOCRForCallback, (void *)addonData, &addonData->asyncWork);//將創建的async work加到隊列中，由底層調度執行napi_queue_async_work(env, addonData->asyncWork);napi_value result = 0;napi_get_null(env, &result);return result;
}

首先通過napi_get_cb_info方法獲取JS側傳入的參數信息，將參數轉成C++對應的類型，然后創建異步工作，異步工作的方法參數中包含，執行的函數以及函數執行完成的回調函數。

我們看一下執行函數

static void executeStartOCR(napi_env env, void* data) {//通過data來獲取數據StartOCRAddOnData * addonData = (StartOCRAddOnData *)data;napi_value resultValue;try {if (api != nullptr) {//調用具體的實現，讀取圖片像素PIX * pix = pixRead((const char*)addonData->args0.c_str());//設置api的圖片像素api->SetImage(pix);//調用文字提取接口，獲取圖片中的文字char * result = api->GetUTF8Text();addonData->result = result;//釋放資源pixDestroy (& pix);delete[] result;}} catch (std::exception e) {std::string error = "Error: ";if (initResult != 0) {error += "please first init tesseractocr.";} else {error += e.what();}addonData->result = error;}
}

這個方法中通過data獲取JS傳入的參數，然后調用Tesseract庫中提供的接口，調用具體的文字提取功能，獲取圖片中的文字。

執行完成后，會回調到completeStartOCRForCallback，在這個方法中會將執行函數中返回的結果轉換為JS的對應類型，然后通過Callback的方式返回。

static void completeStartOCRForCallback(napi_env env, napi_status status, void * data) {StartOCRAddOnData * addonData = (StartOCRAddOnData *)data;napi_value callback = nullptr;napi_get_reference_value(env, addonData->callback, &callback);napi_value undefined = nullptr;napi_get_undefined(env, &undefined);napi_value result = nullptr;napi_create_string_utf8(env, addonData->result.c_str(), addonData->result.length(), &result);//執行回調函數napi_value returnVal = nullptr;napi_call_function(env, undefined, callback, 1, &result, &returnVal);//刪除napi_ref對象if (addonData->callback != nullptr) {napi_delete_reference(env, addonData->callback);}//刪除異步工作項napi_delete_async_work(env, addonData->asyncWork);delete addonData;
}

應用層實現

應用層主要分為三個模塊：動物圖片文字識別，身份信息識別，提取文字到本地文件

1. 動物圖片文字識別

build() {Column() {Row() {Text('點擊圖片進行文字提取  提取結果 ：').fontSize('30fp').fontColor(Color.Blue)Text(this.ocrResult).fontSize('50fp').fontColor(Color.Red)}.margin('10vp').height('10%').alignItems(VerticalAlign.Center)Grid() {ForEach(this.images, (item, index) => {GridItem() {AnimalItem({path1: item[0],path2: item[1]});}})}.padding({left: this.columnSpace, right: this.columnSpace}).columnsTemplate("1fr 1fr 1fr")      // Grid寬度均分成3份.rowsTemplate("1fr 1fr")     // Grid高度均分成2份.rowsGap(this.rowSpace)                  // 設置行間距.columnsGap(this.columnSpace)            // 設置列間距.width('100%').height('90%')}.backgroundColor(Color.Pink)}

布局主要使用了Grid的網格布局，每個Item都是對應的圖片，通過點擊圖片可以對點擊圖片進行文字提取，將提取出的文字顯示在標題欄。

2. 身份信息識別

build() {Row() {Column() {Image('/common/idImages/aobamao.jpg').onClick(() => {//點擊圖片進行信息識別console.log('OCR begin dialog open 111');this.ocrDialog.open();ToolUtils.ocrResult(ToolUtils.aobamao, (result) => {console.log('111 OCR result = ' + result);this.result = result;this.ocrDialog.close();});}).margin('10vp').objectFit(ImageFit.Auto).height('50%')Image('/common/idImages/weixiaobao.jpg').onClick(() => {//點擊圖片進行信息識別this.ocrDialog.open();ToolUtils.ocrResult(ToolUtils.weixiaobao, (result) => {console.log('111 OCR result = ' + result);this.result = result;this.ocrDialog.close();});}).margin('10vp').objectFit(ImageFit.Auto).height('50%')}.width(this.screenWidth/2).padding('20vp')Column() {Text(this.title).height('10%').fontSize('30fp').fontColor(this.titleColor)Column() {Text(this.result).fontColor('#0000FF').fontSize('50fp')}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).height('90%')}.justifyContent(FlexAlign.Start).width('50%')}.width('100%').height('100%')}

身份信息識別的布局最外層是一個水平布局，分為左右兩部分，左邊的子布局是垂直布局，里面是兩張不同的身份證圖片，右邊子布局也是垂直布局，主要是標題區和識別結果的內容顯示區。

3. 提取文字到本地文件

Row() {Column() {Image('/common/save2FileImages/testImage1.png').onClick(() => {//點擊圖片進行信息識別ToolUtils.ocrResult(ToolUtils.testImage1, (result) => {let path = this.dir + 'ocrresult1.txt';try {let fd = fileio.openSync(path, 0o100 | 0o2, 0o666);fileio.writeSync(fd, result);fileio.closeSync(fd);this.displayText = '文件寫入' + path;} catch (e) {console.log('OCR fileio error = ' + e);}});})Image('/common/save2FileImages/testImage2.png').onClick(() => {//點擊圖片進行信息識別ToolUtils.ocrResult(ToolUtils.testImage2, (result) => {let path = this.dir + 'ocrresult2.txt';let fd = fileio.openSync(path, 0o100 | 0o2, 0o666);fileio.writeSync(fd, result);fileio.closeSync(fd);this.displayText = '文件寫入' + path;});})}Column() {Text(this.title)Column() {Text(this.displayText)}}}

這個功能首先通過接口識別出圖片中的文字，然后再通過fileio的能力將文字寫入文件中。