本教程展示了如何使用LEADTOOLS SDK在React JS应用程序中的图像上运行OCR文本识别。
| 概述 | |
|---|---|
| 总结 | 本教程介绍如何在React JS应用程序中对图像运行OCR。 |
| 完成时间 | 30分钟 |
| Visual Studio项目 | 下载教程项目(474 KB) |
| 平台 | React JS Web应用程序 |
| IDE | Visual Studio -服务和Visual Studio代码-客户端 |
| 开发许可 | 下载LEADTOOLS |
对象中创建项目和加载图像的基本步骤imageview通过回顾添加引用和设置License而且在图像查看器中显示图像教程,在工作之前用OCR - React JS从图像中提取文本教程。
确保安装了Yarn,这样就可以通过命令行快速创建React应用程序。如果没有安装纱线,可以在以下位置找到:
https://classic.yarnpkg.com/en/docs/install/#windows-stable
中创建的项目的副本开始在图像查看器中显示图像教程。如果您没有该教程项目的副本,请按照该教程中的步骤创建它。
所需要的参考资料取决于项目的目的。对于这个项目,需要以下JS文件,位于这里:< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS
Leadtools.jsLeadtools.Controls.jsLeadtools.Document.jsLeadtools.Annotations.Engine.js请确保将这些文件复制到公众\常见文件夹中导入公众\ index . html文件。
有关要为JavaScript应用程序包括哪些文件的详细信息,请参见你的申请所包含的文件.
许可证解锁项目所需的特性。它必须在调用任何工具箱函数之前设置。有关详细信息,包括针对不同平台的教程,请参阅设置运行时License.
有两种类型的运行时许可证:
打开index . html在公共文件夹中。控件中添加以下必要的脚本标记头导入LEADTOOLS依赖项。
<头><元字符集="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><元名称="viewport" content="width=device-width, initial-scale=1" /><Meta name="theme-color" content="#000000" /><meta name="description" content="使用create-react-app创建的网站" /><脚本src = " https://code.jquery.com/jquery-3.4.1.min.js "诚信= " sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = " crossorigin =“匿名”></脚本><导入LEADTOOLS依赖项><script type="text/javascript" src="/common/Leadtools.js"></脚本><script type="text/javascript" src="/common/Leadtools.Controls.js"></脚本><script type="text/javascript" src="/common/Leadtools.188金宝搏beat体育官网Demos.js"></脚本><script type="text/javascript" src="/common/Leadtools.Document.js"></脚本><——用Leadtools Logic——导入脚本><脚本src = " /共同/ DocumentHelper.js "></脚本><脚本src = " /共同/ app.js "></脚本><link rel="manifest" href="%PUBLIC_URL%/manifest. linkjson " /><标题>反应的应用</标题></头>
创建项目、添加引用、设置许可证和imageview可以开始初始化编码。
在常见的文件夹中的公共文件夹,创建一个新的JS文件名为DocumentHelper.js.在新的JS文件中添加一个名为DocumentHelper.控件中添加以下代码DocumentHelper类。
类DocumentHelper {//启动函数静态connectToDocumentService = () => {让serviceStatus;document.addEventListener (“DOMContentLoaded”内,函数() {serviceStatus = document.getElementById(“serviceStatus”);let output = document.getElementById(“输出”);//要与DocumentsService通信,它必须正在运行!//更改这些参数以匹配服务的路径。lt.Document.DocumentFactory.serviceHost =“http://localhost: 40000”;lt.Document.DocumentFactory.servicePath ="";lt.Document.DocumentFactory.serviceApiPath =“api”;serviceStatus。innerHTML =“连接到服务”+ lt.Document.DocumentFactory.serviceUri;lt.Document.DocumentFactory.verifyService ().done (函数(serviceData) {let setStatus =函数(){serviceStatus。innerHTML = (“\ n”+“\ u2022”+“服务连接已验证!”);}setTimeout (setStatus, 1500);})fail (showServiceError)fail (函数() {serviceStatus。innerHTML =“服务未正确连接。”;});});}静态showServiceError = (jqXHR, statusText, errorThrown) => {alert ("服务返回错误。详见控制台。”);常量serviceError = lt.Document.ServiceError。parseError(jqXHR, statusText, errorThrown);console.error (serviceError);}静态Log = (message, data) => {常量outputElement = document.getElementById(“输出”);如果(outputElement) {常量时间= (新日期()).toLocaleTimeString ();常量textElement = document.createElement(“p”);textElement。innerHTML =“\ u2022”+“(”+时间+“:”+消息;textElement。风格=“text-align:左”;;outputElement。列表末尾(textElement outputElement.firstChild);}如果数据(!)console.log(消息);其他的console.log(消息、数据);}}
打开App.js在src然后用下面的代码替换HTML:
进口反应从“反应”;进口”。/ App.css ';函数应用(){返回(< div className =“应用程序”><头className =“App-header”>< p id =“serviceStatus”> < / p >React OCR示例
< div id =“btnMenu”>< input type =“文件”id =“文件输入”接受=“jpg, jpeg, png”输入> < / ><按钮id =“addToViewer”> . >添加图像到查看器<按钮id =“ocrButton”> Ocr > < /按钮< / div >< div id =“imageViewerDiv”> < / div ><编辑id =“输出”> < /编辑>头> < /< / div >);}出口默认的应用程序;
导航到App.css在src创建HTML元素的文件夹。添加以下代码以改善应用程序的视觉效果。
.App {text-align:中心;}@media (preferred -reduced-motion: no-preference) {.App-logo {动画:App-logo-spin无限20s线性;}}.App-header {background - color: # 282 c34;最小高度:100 vh;显示:flex;flex-direction:列;对齐项目:中心;justify-content:中心;字体:calc(10px + 2vmin);颜色:白色;}.App-link {颜色:# 61 dafb;}@keyframes App-logo-spin {从{变换:旋转(0度);}, {变换:旋转(360度);}}# btnMenu {background - color: # 555555;显示:flex;flex-direction:列;宽度:350 px;填充:10 px;}#{输出background - color: # 888888;宽度:70%;padding-left: 15 px;padding-right: 15 px;}# imageViewerDiv {Background-color: rgba(170, 170, 170, 1);这个特性:1%;margin-top: 5 px;身高:400 px;宽度:400 px;}
开放app.js的结束之前添加以下代码window ()函数。
//创建一个图像查看器let imageViewerDiv = document.getElementById(“imageViewerDiv”);常量createOptions =新lt.Controls.ImageViewerCreateOptions (imageViewerDiv);这.imageViewer =新lt.Controls.ImageViewer (createOptions);这.imageViewer.zoom (lt.Controls.ControlSizeMode。fit, 1, imageViewer.defaultZoomOrigin);这.imageViewer。viewverticalalign = lt. controls . controlalign .center;这.imageViewer。viewhizontalalignment = lt.Controls.ControlAlignment.center;这.imageViewer。autoCreateCanvas =真正的;这.imageViewer。imageUrl =“https://demo.leadtools.com/images/jpeg/cannon.jpg”;抓取HTML元素let fileList = document.getElementById(“文件输入”);let btn = document.getElementById(“addToViewer”);btn。点击= (函数() {//创建迭代器// I = 0;//最初将我们的目标设置为上传文件的第一个子,然后迭代它//可以加载后续图像。let files = fillist .files[0];让newUrl = window.URL.createObjectURL(文件);imageview。imageUrl =新Url;/ /我+ +;});//创建条形码按钮let ocrBtn = document.getElementById(“ocrButton”);//创建点击事件ocrBtn。Onclick = async函数() {//在运行条码识别之前,我们检查图像是否已上传// I = 0;如果(! fileList.files [0]) {alert (“没有为条形码识别选择图像。在获取条形码之前,通过“选择文件”选择图像。);}其他的{试一试{let leadDoc = await lt.Document.DocumentFactory.loadFromFile(fillist .files[0],新lt.Document.LoadDocumentOptions ())console.log ("文档已加载并具有缓存id: "+ leadDoc.documentId);let leadRectD = lt.LeadRectD.empty;DocumentHelper.log (“OCR开始……”);//由于在图像上运行OCR,并且将文本附加到页面上会拉长文档,所以我们滚动到输出。让myelem = document.getElementById(“输出”)let scrollOptions = {左:myelem.offsetParent.offsetWidth,上图:myelem.offsetParent.offsetHeight,行为:“顺利”}window.scrollTo (scrollOptions);leadDoc.pages.item (0) .getText (leadRectD)let CharacterData = await leadDoc.pages.item(0).getText(leadRectD);console.log (CharacterData);DocumentHelper.log (OCR文本:+ CharacterData.text);window.scrollTo (scrollOptions);/ /我+ +;}抓(错误){console.error(错误);}}};
为了成功运行此应用程序,需要LEADTOOLS . net框架文档服务。.NET框架文档服务项目位于< INSTALL_DIR > \ LEADTOOLS22 \ \例子文档\ JS \ DocumentServiceDotNet \外汇.
请注意
只有. net框架文档服务能够uploadDocumentBlob,所以这与. net核心文档服务不兼容。
打开DocumentService.csproj并使用IIS Express运行项目。在Visual Studio中运行Document Service项目后,页面将显示服务正在监听。客户端将能够与文档服务通信,允许图像数据处理,并从图像中返回提取的文本。
要运行OCR项目,请打开一个新的终端窗口和cd进入项目的根目录。从那里运行命令纱线开始.如果项目中没有包含节点模块,请确保也运行该命令npm安装,然后运行项目。
要测试项目,请遵循以下步骤:
一旦你选择你希望OCR按图像将图像添加到查看器.
以OCR图像和打印的结果下面imageview,按光学字符识别.
本教程展示了如何在ReactJS应用程序中从图像中识别文本。