作者:郭嶽峰
一、簡介
Tesseract (Apache 2.0 License)是一個可以進行圖像OCR識别的C++庫,可以跨平台運作 。本樣例基于Tesseract 庫進行适配,使其可以運作在 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)上,并新增N-API接口供上層應用調用,這樣上層應用就可以使用Tesseract提供的相關功能。
二、效果展示
動物圖檔識别文字
身份資訊識别
提取文字資訊到本地檔案
相關代碼已經上傳至SIG倉庫,連結如下:
https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/OCRDemo
三、目錄結構
四、調用流程
調用過程主要涉及到三方面,首先應用層實作樣例的效果,包括頁面的布局和業務邏輯代碼;中間層主要起橋梁的作用,提供N-API接口給應用調用,再通過三方庫的接口去調用具體的實作;Native層使用了三方庫Tesseract提供具體的實作功能。
五、源碼分析
本樣例源碼的分析主要涉及到兩個方面,一方面是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_END
static 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 work
napi_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的能力将文字寫入檔案中。
6. 總結
樣例通過Native的方式将C++的三方庫內建到應用中,通過N-API方式提供接口給上層應用調用。對于依賴三方庫能力的應用,都可以使用這種方式來進行,移植三方庫到Native,通過N-API提供接口給應用調用。
關于樣例開發,我之前還分享過《如何利用OpenHarmony ArkUI的Canvas元件實作塗鴉功能?》、《如何通過OpenHarmony的音頻子產品實作錄音變速功能?》 歡迎感興趣的開發者進行了解并與我交流樣例開發經驗。
更多原創内容請關注:深開鴻技術團隊
入門到精通、技巧到案例,系統化分享OpenHarmony開發技術,歡迎投稿和訂閱,讓我們一起攜手前行共建生态。