在Web程序中快速实现文字识别

简介

在文档电子化的过程中,常常需要从获取的图像文件中提取出需要的信息。这个过程中,最准确的方式是用机器思考的方式进行,典型的做法是识别二维码获取内容。如果您的文档满足这个条件,可以参考二维条码识别。实际应用中,一般获取的图像中包含的信息是以人类思考的方式展现的,即文字。这种情况下,要让机器读懂并提取信息,就要用到光学字符识别技术(英语:Optical Character Recognition,OCR)。本文中我们探讨一下如何快速的实现在浏览器中扫描并识别文字。

开发测试环境

电脑上需要安装 node

步骤

一、新建一个目录,在里面打开命令行工具(快捷方式为Ctrl+Shift+右击)通过npm下载本文使用的核心控件

npm install dwt@14.1.0

然后在这个目录可以看到

二、打开到以下目录

node_modules\dwt\sample

可以看到

三、在本文中,我们要研究的是OCRADocument.html。直接双击打开。如果相关的控件尚未,则按照提示安装控件

正常情况下,安装的文件可以在C:\Windows\SysWOW64\Dynamsoft\DynamsoftService目录中找到。这里的核心文件主要是

DynamsoftService.exe

dwt_trial_14.1.0.0828.dll

DynamicOCR.dll

/DynamicOCR/

四、安装完成后,刷新页面,点击“Scan Documents”(本地需要有扫描仪)或者“Load Images or PDFs”来扫描或者加载本地图片文件。由于该控件开发者是加拿大公司,相关页面是英文显示,且默认只能识别英文。所以我们加载一个英文文件并点击“OCR An Image with English”。图片的识别结果就在右面的结果框中显示出来了。

功能是怎么实现的

在文本编辑器中打开OCRADocument.html

一、核心JS的引用

<script type="text/javascript" src="../dist/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="../dist/dynamsoft.webtwain.config.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.webtwain.addon.pdf.js"></script>
<script type="text/javascript" src="../dist/addon/dynamsoft.webtwain.addon.ocr.js"></script>

这里引用的是

核心SDKDynamic Web TWAIN相关代码

node_modules\dwt\dist\dynamsoft.webtwain.initiate.js node_modules\dwt\dist\dynamsoft.webtwain.config.js

外加本示例中用到的Dynamsoft OCR Basic的相关代码

node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.ocr.js

PDF Rasterizer是额外的,并非必需。参考“文本PDF转图片”

node_modules\dwt\dist\addon\dynamsoft.webtwain.addon.pdf.js

如果您之前本地安装了Dynamic Web TWAIN产品,则除了dynamsoft.webtwain.addon.pdf.js外的文件也可以在以下目录找到

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK 14.1 Trial\Resource

二、Dynamsoft OCR Basic运行时安装代码

function downloadOCRBasic(bDownloadDLL) {
    var strOCRPath = Dynamsoft.WebTwainEnv.ResourcesPath + "/OCRResources/OCR.zip",
        strOCRLangPath = Dynamsoft.WebTwainEnv.ResourcesPath + '/OCRResources/OCRBasicLanguages/English.zip';

    if (bDownloadDLL) {
        DWObject.Addon.OCR.Download(
            strOCRPath,
            function () {/*console.log('OCR dll is installed');*/
                downloadOCRBasic(false);
            },
            function (errorCode, errorString) {
                console.log(errorString);
            }
        );
    } else {
        DWObject.Addon.OCR.DownloadLangData(
            strOCRLangPath,
            function () {
            }, function (errorCode, errorString) {
                console.log(errorString);
            });
    }
}

如上代码所示,Dynamsoft OCR Basic安装分为两步,第一步是用DWObject.Addon.OCR.Download接口安装核心DLL"/OCRResources/OCR.zip"),即前文提到的DynamicOCR.dll。第二步是用DWObject.Addon.OCR.DownloadLangData接口安装OCR语言包或者识别字典('/OCRResources/OCRBasicLanguages/English.zip')到前文提到的/DynamicOCR/。这里只安装了English字典,所以程序将只能识别英文。如果需要识别其它语言(总共27种主流语言),可以下载一个完整示例或者参考以下在线示例

Scan Documents and Client-side OCR basic

附支持的语言列表

英文名 中文名
Arabic 阿拉伯语
Bengali 孟加拉语
Chinese_Simplified 简体中文
Chinese_Traditional 繁体中文
English 英语
French 法语
German 德语
Hindi 印地语
Indonesian 印尼语
Italian 意大利语
Japanese 日语
Javanese 爪哇语
Korean 韩语
Malay 马来语
Marathi 马拉地语
Panjabi 旁遮普语
Persian 波斯语
Portuguese 葡萄牙语
Russian 俄语
Spanish 西班牙语
Swahili 斯瓦希里语
Tamil 泰米尔语
Telugu 泰卢固语
Thai 泰语
Turkish 土耳其语
Vietnamese 越南语
Urdu 乌尔都语

三、使用插件

function DoOCR() {
    if (DWObject) {
        if (DWObject.HowManyImagesInBuffer == 0) {
            alert("Please scan or load an image first.");
            return;
        }
        DWObject.Addon.OCR.SetLanguage('eng');
        DWObject.Addon.OCR.SetOutputFormat(EnumDWT_OCROutputFormat.OCROF_TEXT);
        DWObject.Addon.OCR.Recognize(
            DWObject.CurrentImageIndexInBuffer,
            function (sImageIndex, result) {
                if (result == null)
                    return null;
                var _textResult = (Dynamsoft.Lib.base64.decode(result.Get())).split(/\r?\n/g), _resultToShow = [];
                for (var i = 0; i < _textResult.length; i++) {
                    if (i == 0 && _textResult[i].trim() == "")
                        continue;
                    _resultToShow.push(_textResult[i] + '<br />');
                }
                _resultToShow.splice(0, 0, '<p style="padding:5px; margin:0;">');
                _resultToShow.push('</p>');
                document.getElementById('divNoteMessage').innerHTML = _resultToShow.join('');
            },
            function (errorcode, errorstring, result) {
                alert(errorstring);
            }
        );
    }
}

核心代码为

DWObject.Addon.OCR.SetLanguage('eng');//设置识别的语言
DWObject.Addon.OCR.SetOutputFormat(EnumDWT_OCROutputFormat.OCROF_TEXT);//设置输出的格式。
DWObject.Addon.OCR.Recognize(...//开始识别

输出格式有

代码 格式说明
OCROF_TEXT 纯文本TXT
OCROF_PDFPLAINTEXT 只含文本的PDF
OCROF_PDFPLAINTEXT_PDFX 只含文本的PDF/A
OCROF_PDFIMAGEOVERTEXT 含文本,保持原图的PDF
OCROF_PDFIMAGEOVERTEXT_PDFX 含文本,保持原图的PDF/A

相关核心方法有,参考API文档

方法名 方法说明
Recognize 识别一张图片
RecognizeFile 识别一个文件
RecognizeRect 识别一张图片上的一个区域
RecognizeSelectedImages 一次识别多张选中图片

results matching ""

    No results matching ""