Hello, world!

In this article, you will learn how to build a basic web page that requests an image file from an user and extracts the text from it with with Aspose.OCR for JavaScript via C++.

We assume that you already have a basic knowledge of HTML and JavaScript.

You will need

A compatible web browser.
Any text editor.
Web server to overcome CORS limitations. In this article, we will use Python 3 to run the server.
Some image containing a text. You can simply download the one from this article.
15 minutes of spare time.

Preparing

Create a directory somewhere on your system where the project files will be kept. For example, C:\Aspose-JS-Example\.
This directory will later be referred as project directory.
Download Aspose.OCR for JavaScript via C++ and extract it somewhere on your system.
Copy the files from lib directory of the extracted Aspose.OCR for JavaScript via C++ package to the the project directory:
- asposeocr.js
- asposeocr.wasm
- asposeocr.data
Download a sample image:

Coding

Create a simple index.html file in the the project directory.

<!doctype html>
<html>
   <head>
      <title>Aspose.OCR for JavaScript via C++</title>
   </head>
   <body>
   </body>
</html>

Add an input field in which the user can upload an image file and an element to display recognition results to the page body:

<p><b>Provide image file:</b></p>
<input type="file" id="sourceFile">
<p><b>Log:</b></p>
<div id="outputConsole" style="border: solid 1px #cccccc; padding: 10px;"></div>

Reference Aspose.OCR for JavaScript via C++ main script:
```
<script src="asposeocr.js"></script>
```

Add a custom JavaScript for image processing:

<script>
var Module = {
   onRuntimeInitialized: function()
   {
      // Initialize interface elements
      const sourceFile = document.getElementById("sourceFile");
      sourceFile.addEventListener("change", handleImgUpload);
      const outputConsole = document.getElementById("outputConsole");
      log("Select an image to continue...");

      // Recognition
      function handleImgUpload(event)
      {
         // Load image file provided by the user
         const file = event.target.files[0];
         log(`Source image: ${file.name}`);
         const reader = new FileReader();
         reader.onload = function(e){
            const fileData = new Uint8Array(e.target.result);
            let filename = file.name;
            let stream = Module.FS.open(filename, "w+");
            Module.FS.write(stream, fileData, 0, fileData.length, 0);
            Module.FS.close(stream);
            // Initialize recognition engine
            var input = Module.WasmAsposeOCRInput();
            var inputs = new Module.WasmAsposeOCRInputs();
            var settings = Module.WasmAsposeOCRRecognitionSettings();
            // Send image file for recognition
            input.url = filename;
            inputs.push_back(input);
            var result = Module.AsposeOCRRecognize(inputs, settings);
            // Get recognition results as text
            var result_str = Module.AsposeOCRSerializeResult(result, Module.ExportFormat.text);
            // Show recognition results
            log("Recognition result:");
            log(result_str);
         };
         reader.readAsArrayBuffer(file);
         log("Recognition started, please wait...");
      }

      // Logging
      function log(text)
      {
         outputConsole.innerHTML += `<p>${text}</p>`;
      }
   }
};
</script>

Full listing

<!doctype html>
<html>
   <head>
      <title>Aspose.OCR for JavaScript via C++</title>
   </head>
   <body>
      <p><b>Provide image file:</b></p>
      <input type="file" id="sourceFile">
      <p><b>Log:</b></p>
      <div id="outputConsole" style="border: solid 1px #cccccc; padding: 10px;"></div>
      <script>
      var Module = {
         onRuntimeInitialized: function()
         {
            // Interface
            const sourceFile = document.getElementById("sourceFile");
            sourceFile.addEventListener("change", handleImgUpload);
            const outputConsole = document.getElementById("outputConsole");
            log("Select an image to continue...");

            // Recognition
            function handleImgUpload(event)
            {
               const file = event.target.files[0];
               log(`Source image: ${file.name}`);
               const reader = new FileReader();
               reader.onload = function(e){
                  const fileData = new Uint8Array(e.target.result);
                  let filename = file.name;
                  let stream = Module.FS.open(filename, "w+");
                  Module.FS.write(stream, fileData, 0, fileData.length, 0);
                  Module.FS.close(stream);
                  var input = Module.WasmAsposeOCRInput();
                  var inputs = new Module.WasmAsposeOCRInputs();
                  var settings = Module.WasmAsposeOCRRecognitionSettings();
                  input.url = filename;
                  inputs.push_back(input);
                  var result = Module.AsposeOCRRecognize(inputs, settings);
                  // Get recognition results as text
                  var result_str = Module.AsposeOCRSerializeResult(result, Module.ExportFormat.text);
                  log("Recognition result:");
                  log(result_str);
               };
               reader.readAsArrayBuffer(file);
               log("Recognition started, please wait...");
            }

            // Logging
            function log(text)
            {
               outputConsole.innerHTML += `<p>${text}</p>`;
            }
         }
      };
      </script>
      <script src="asposeocr.js"></script>
   </body>
</html>

Running

Open the command prompt and navigate to the project directory.
Run the HTTP server using Python: python -m http.server 8080

If the port 8080 is already occupied, provide a different one.
Open http://localhost:8080/ with a web browser.
Select an image and wait for recognition to complete.

You will see extracted text inside the outputConsole DIV element:

Select an image to continue...

Source image: source.png

Recognition started, please wait...

Recognition result:

Hello. World! I can read this text

Recognition may take a long time depending on the image size and your system performance, and you may receive “This page is not responding” error.

Ignore the message and wait for recognition to complete.

What’s next

Congratulations! You have performed OCR on an image and extracted the machine-readable text from it directly from a web page. Read the Developer reference for details on developing advanced applications with Aspose.OCR for JavaScript C++.

Licensing