This tutorial shows how to create a React JS application that uses the LEADTOOLS SDK to perform barcode detection and recognition.
Overview | |
---|---|
Summary | This tutorial covers how to use LEADTOOLS Barcode SDK technology in a React JS application |
Completion Time | 30 minutes |
Visual Studio Project | Download tutorial project (209 KB) |
Platform | React JS Web Application |
IDE | Visual Studio : Service \ Visual Studio Code : Client |
Development License | Download LEADTOOLS |
Try it in another language |
|
Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License and Display Images in an ImageViewer tutorials, before working on the Detect and Extract Barcodes - React JS tutorial.
Make sure that Yarn is installed so that creating a React application can be done quickly via the command line. If yarn is not installed, it can be found on:
https://classic.yarnpkg.com/en/docs/install/#windows-stable
To create the project structure open the command line console and cd into the location where the project is to be created. Then run the following command:
Yarn create react-app appname
The references needed depend upon the purpose of the project. For this project, the following JS files are needed:
Leadtools.js
Leadtools.Controls.js
Leadtools.Annotations.Engine.js
Leadtools.Document.js
Make sure to copy these files to the public\common
folder and import them in the public\index.html
file.
The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.
There are two types of runtime licenses:
Note
Adding LEADTOOLS local references and setting a license are covered in more detail in the Add References and Set a License tutorial.
Open the index.html
file in the public
folder. Add the below necessary script tags inside the head to import LEADTOOLS dependencies.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--Import LEADTOOLS dependencies-->
<script type="text/javascript" src="/common/Leadtools.js"></script>
<script type="text/javascript" src="/common/Leadtools.Controls.js"></script>
<script type="text/javascript" src="/common/Leadtools.Annotations.Engine.js"></script>
<script type="text/javascript" src="/common/Leadtools.Document.js"></script>
<!--Import our script with our Leadtools Logic-->
<script src="/common/app.js"></script>
<script src="/common/ltlogic.js"></script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
With the project created, the references added, the ImageViewer initialized, and the license set, coding can begin.
Open ltlogic.js
, this file should be situated in the Common
folder in the public
folder. Creation of ltlogic.js
is covered in the Add References and Set a License tutorial. Add a new class called DocumentHelper
after the set license call. Add the following code inside the new class.
class DocumentHelper {
static showServiceError = (jqXHR, statusText, errorThrown) => {
alert("Error returned from service. See the console for details.");
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
static log = (message, data) => {
const outputElement = document.getElementById("output");
if (outputElement) {
const time = (new Date()).toLocaleTimeString();
const textElement = document.createElement("p");
textElement.innerHTML = "\u2022" + " [" + time + "]: " + message;
textElement.style = "text-align: left;";
outputElement.appendChild(textElement, outputElement.firstChild);
}
if (!data)
console.log(message);
else
console.log(message, data);
}
}
Open the App.js
file in the src
folder and replace the HTML with the following code:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<p id="serviceStatus"></p>
<h3>React Barcode Example </h3>
<div id="btnMenu">
<input type="file" id="file-input" accept=".jpg,.jpeg,.png"></input>
<button id="addToViewer">Add Image To Viewer</button>
<button id="barcodeButton">Read Barcodes</button>
</div>
<div id="imageViewerDiv"></div>
<h6 id="output"></h6>
</header>
</div>
);
}
export default App;
In the public/common
folder, add a blank app.js. Add the following contents to the file so the application can communicate with the LEADTOOLS Document Service.
var documentViewer, serviceStatus, output, exampleButton;
// Parses error information.
function showServiceError(jqXHR, statusText, errorThrown) {
alert("Error returned from service. See the console for details.")
var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
// Startup function
document.addEventListener("DOMContentLoaded", function () {
serviceStatus = document.getElementById("serviceStatus");
output = document.getElementById("output");
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
serviceStatus.innerHTML = "Connecting to service " + lt.Document.DocumentFactory.serviceUri;
lt.Document.DocumentFactory.verifyService()
.done(function (serviceData) {
let setStatus = function(){
serviceStatus.innerHTML = ("\n" + "\u2022" + " Service connection verified!");
}
setTimeout(setStatus, 1500);
})
.fail(showServiceError)
.fail(function () {
serviceStatus.innerHTML = "Service not properly connected.";
});
});
Navigate to App.css
, in the src
folder which creates our HTML elements. Replace its contents with the following code to improve the visuals of the application.
.App {
text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#btnMenu{
background-color: #555555;
display: flex;
flex-direction: column;
width: 350px;
padding: 10px;
}
#output{
background-color: #888888;
width: 70%;
padding-left: 15px;
padding-right: 15px;
}
#imageViewerDiv{
background-color: rgba(170, 170, 170, 1);
border-radius: 1%;
margin-top: 5px;
height: 400px;
width: 400px;
}
Open ltlogic.js
, and add the following code prior to the end of the window.onload()
function.
//Create an Image Viewer
let imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
this.imageViewer = new lt.Controls.ImageViewer(createOptions);
this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin);
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
this.imageViewer.autoCreateCanvas = true;
this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
//Create variables Grabbing the HTML elements
let fileList = document.getElementById("file-input");
let btn = document.getElementById("addToViewer");
btn.onclick = (function () {
//create our iterator
let i = 0;
//initially set our target to the first child of the uploaded files, then iterate it so
//subsequent images can be loaded in.
let files = fileList.files[i];
let newUrl = window.URL.createObjectURL(files);
imageViewer.imageUrl = newUrl;
i++;
});
//Create the Barcode Button
var barcodeBtn = document.getElementById("barcodeButton");
//Create the Click Event
barcodeBtn.onclick = (function () {
//Before running Barcode Recognition, we check if an image has been uploaded
let i = 0;
if (!fileList.files[i]) {
alert("No Image Chosen for Barcode Recognition. Select an Image via Choose File, before getting the Barcode");
}
else
//Run Barcode Recognition on the Image
lt.Document.DocumentFactory.loadFromFile(fileList.files[i], new lt.Document.LoadDocumentOptions())
.done((docum) => {
console.log("Document loaded and has cache id: " + docum.documentId);
//After making sure the file is loaded, Download it's document data.
lt.Document.DocumentFactory.downloadDocumentData(docum.documentId, null, false)
.done((result) => {
console.log("Finished downloading, mime type: " + result.mimeType + " data length: " + result.data.byteLength);
// Create a BLOB from this document
const data = result.data;
const blob = new Blob([new Uint8Array(data, 0, data.byteLength)]);
console.log({ data });
//here we are passing our blob into uploadDocument to put the binary data uploaded from the image into cache
const uploadDocumentOptions = new lt.Document.UploadDocumentOptions();
uploadDocumentOptions.documentDataLength = blob.size;
lt.Document.DocumentFactory.beginUploadDocument(uploadDocumentOptions)
.done((uploadUri) => {
console.log(uploadUri, blob);
lt.Document.DocumentFactory.uploadDocumentBlob(uploadUri, blob)
.done(() => {
console.log("finishing upload...")
lt.Document.DocumentFactory.endUpload(uploadUri)
.done(() => {
console.log("Loading document " + uploadUri);
const options = new lt.Document.LoadDocumentOptions();
options.loadMode = lt.Document.DocumentLoadMode.localThenService;
lt.Document.DocumentFactory.loadFromUri(uploadUri, options)
.done((doc) => {
//Now the Document is uploaded in cache, and we can verify by seeing it's Cache ID
console.log("Document loaded and has cache id: " + doc.documentId);
let leadRectD = lt.LeadRectD.empty;
DocumentHelper.log("Barcode Recognition Starting...");
//Running Barcode Recognition on an image, Since appending the output to the bottom of the page elongates the document, we scroll to the output.
let myelem = document.getElementById("output")
let scrollOptions = {
left: myelem.offsetParent.offsetWidth,
top: myelem.offsetParent.offsetHeight,
behavior: 'smooth'
}
window.scrollTo(scrollOptions);
doc.pages.item(0).readBarcodes(leadRectD)
.done((CharacterData) => {
console.log(CharacterData);
DocumentHelper.log("Barcode's value : " + CharacterData[0]._data);
window.scrollTo(scrollOptions);
i++;
});
})
.fail(DocumentHelper.showServiceError);
})
.fail(DocumentHelper.showServiceError);
})
.fail(DocumentHelper.showServiceError);
})
.fail(DocumentHelper.showServiceError);
})
.fail(DocumentHelper.showServiceError);
})
.fail(DocumentHelper.showServiceError);
});
In order to run this application successfully, the LEADTOOLS .NET Framework Document Service is required. The LEADTOOLS .NET Framework Document Service project is located at <INSTALL_DIR>\LEADTOOLS21\Examples\JS\Services\DocumentServiceDotNet\fx
.
Note
Only the .NET FrameWork Document Service is able to uploadDocumentBlob, so this will not function with the .NET Core Document Service.
Open the DocumentService.csproj
and run the project using IIS Express. After running the csproj Document Service project in Visual Studio, the webpage will show that the service is listening. The Client Side will be able to communicate with the Document Service, allowing the Image Data processing, and returning the Barcodes from the image.
Run the created barcode React application. Open the command line console and cd into the root of the project. From there, run yarn start
. Choose a barcode image to extract the data from and select Add Image to Viewer
.
Select barcode
and notice the results.
This tutorial showed how to detect and extract barcode values.