本教程展示了如何使用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.js
Leadtools.Controls.js
Leadtools.Document.js
Leadtools.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应用程序中从图像中识别文本。