How to use Optical Character Recognition (OCR) with JavaScript?

Optical Character Recognition (OCR) allows you to extract text from images, unlocking powerful use cases like document scanning, data entry automation, and image-based search. In this tutorial, you’ll learn how to implement OCR using JavaScript and Eden AI’s API.

Whether you're building a web app or automating workflows, this guide will walk you through integrating OCR functionality quickly and efficiently.

‍

What is Optical Character Recognition (OCR)?

OCR (Optical Character Recognition) is a technology that converts text within images or scanned documents into machine-readable text.

It allows you to extract written or printed characters from visuals like receipts, IDs, or handwritten notes, making it easier to search, edit, or process text data programmatically.

‍

How to use Optical Character Recognition (OCR) with JavaScript?

Set Up Your Eden AI Account

1. Sign Up: If you don't have an Eden AI account, create a free one using the following link. Once you do that you can obtain your API key, which you can use to access various AI services, including financial document parsing.

2. Access OCR Tools: Once logged in, go to the document parsing section of the platform.

3. Choose the OCR Generic Feature: Select the OCR Generic tool. You can also explore advanced parsing options based on your specific requirements

‍

Step 3: Implementing the Feature in JavaScript

Install Axios

To interact with the Eden AI API in JavaScript, we will use the axios library, a popular HTTP client for making requests to REST APIs.

You can install it using npm:

    
      npm install axios;
    
  

‍

Prepare the Code

Once you have the axios library installed, you can implement the OCR feature by making a POST request to Eden AI’s OCR endpoint.

Here's an example of the code to implement OCR using Eden AI API in JavaScript:

    
      const axios = require("axios").default;

      const options = {
        method: "POST",
        url: "https://api.edenai.run/v2/ocr/ocr",  // Eden AI OCR endpoint
        headers: {
          Authorization: "Bearer YOUR_API_KEY_HERE",  // Replace with your actual API key
        },
        data: {
          providers: "microsoft, google",  // OCR providers (you can select Microsoft or Google)
          language: "en",  // Language of the text in the image
          file_url: "🔗 URL of your image",  // URL of the image you want to process
        },
      };

      axios
        .request(options)
        .then((response) => {
          console.log(response.data);  // Log the response data
        })
        .catch((error) => {
          console.error(error);  // Log any error encountered during the request
        });
    
  

Explanation of Code Sections

1. Importing Axios: We import axios to make HTTP requests.
   
2. API Request Configuration:
   
   
   • The url points to Eden AI's OCR API endpoint.
     
   • The Authorization header includes your API key.
     
   • The data section contains the OCR configuration:
     
     
     • providers: Specifies which OCR service to use (Microsoft, Google, etc.).
       
     • language: The language of the text in the image.
       
     • file_url: A URL pointing to the image you want to process (you can also upload the image directly if needed).
       
3. Making the Request: The axios.request() method sends the API request.
   
4. Handling Response and Errors: The .then() method logs the successful response, while .catch() handles any errors.

‍

Step 4: Interpreting the Results

When the request is successful, the response will contain the extracted text from the image. Below is an example of the expected output format:

    
      {
        "status": "success",
        "data": {
          "text": "Hello, this is an OCR test.",
          "language": "en",
          "providers": [
            "microsoft",
            "google"
          ]
        }
      }
    
  

Explanation of the Output Fields:

• status: Indicates the status of the request (e.g., "success").
• text: The extracted text from the image.
• language: The language detected or set for the OCR processing.
• providers: The OCR providers used (in this case, Microsoft and Google).

‍

Why Eden AI is the Best Tool for OCR

Eden AI provides several advantages.

Multiple AI Providers‍

You can choose between different AI services, helping you compare results for the best performance.

Easy Integration‍

Streamline development with one API key that gives access to multiple AI services. Skip the complexity of separate integrations and launch faster.

Cost Efficiency‍

It’s pay-as-you-go — only pay for what you use. No upfront costs, just flexible access to multiple AI services with a single API key.

‍

Conclusion:

In this article, we walked through how to implement Optical Character Recognition (OCR) in JavaScript using the Eden AI API. The process is simple: sign up, get your API key, and then send a request with the image URL to extract text. The response provides valuable data, including the extracted text and the provider used.

Eden AI offers an excellent and straightforward solution for integrating OCR into your web applications. With support for multiple providers and a clean API interface, it’s a fantastic tool for anyone looking to leverage OCR capabilities in their projects.