OCR - Image and PDF to Text using JavaScript and Appscript | Optical Character Recognition with JavaScript

Appscript code for OCR

This AppScript code is designed to work with the HTML code mentioned earlier, which allows you to perform OCR on images and PDF files using JavaScript and AppScript. The AppScript code essentially handles the processing and OCR of the uploaded file, and stores the output as a text file in your Google Drive. Here's a breakdown of the AppScript code:

function doPost(req) {
  try {
    let data = JSON.parse(req.postData.contents); //Parse the request data
    let dcode64 = Utilities.base64Decode(data.file); //Decode the base64 file data
    let blob = Utilities.newBlob(dcode64, data.type, data.name); //Create a blob from the decoded file data
    let insert = Drive.Files.insert({ //Insert the file into your Google Drive
      title: data.name,
      mimeType: data.type
    }, blob, {
      ocr: true //Enable OCR
    let text = DocumentApp.openById(insert.id).getBody().getText(); //Extract text from the OCR output file
    Drive.Files.remove(insert.id); //Remove the OCR output file
    return ContentService.createTextOutput(text); //Return the extracted text as the response
  } catch (err) {
    return ContentService.createTextOutput(err); //Handle any errors and return as the response

This code starts by parsing the request data sent from the HTML code. It then decodes the base64-encoded file data and creates a blob from it. The file is then inserted into your Google Drive, with OCR enabled to perform text recognition. After the file is processed, the text is extracted from the OCR output file and stored as a variable. The OCR output file is then removed from your Drive. Finally, the extracted text is returned as the response to the HTML code, or any errors encountered during the process are returned instead.

HTML CSS JavaScript Code For OCR APP

Replace "_YOUR_APPSCRIPT_API_HERE_" with your api url.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OCR using Javascript and appscript</title>
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        .ocr *{
            margin-top: 5px;
            width: 80%;
            height: 150px;
    <div class="ocr">
        <h1>Image And PDF OCR Tool</h1>
        <h2 class="message"></h2>
        <span>Select a File</span>
        <input type="file" class="file">
        <button class="btn">Perform OCR</button>
        <span>Result Text</span>
        <textarea class="text"></textarea>
        let api = "_YOUR_APPSCRIPT_API_HERE_";
        let msg = document.querySelector(".message");
        let file = document.querySelector(".file");
        let btn = document.querySelector(".btn");
        let text = document.querySelector(".text");
            let fr = new FileReader();
                let res = fr.result;
                let b64 = res.split("base64,")[1];
                  .then(res => res.text())
                  .then(data => {

Explanation of above code

This HTML code creates an OCR (Optical Character Recognition) tool using JavaScript and AppScript. The tool allows users to select an image or PDF file, perform OCR on it, and display the resulting text.

CSS Styling

The CSS styling for the OCR tool includes:

  • A container div with the class "ocr" that uses flexbox to center its contents vertically and horizontally.
  • A margin-top of 5px for all elements within the container.
  • A textarea with the class "text" that has a width of 80% and a height of 150px.

HTML Structure

The HTML structure for the OCR tool includes:

  • A container div with the class "ocr" that contains:
    • A heading h1 that displays the title of the tool.
    • A message h2 that will display any loading or error messages.
    • A label and input element for selecting a file to upload.
    • A button element with the class "btn" that will initiate the OCR process.
    • A label and textarea element for displaying the resulting text.

JavaScript Functionality

The JavaScript functionality for the OCR tool includes:

  • A variable api that stores the URL for the AppScript API.
  • Query selectors for the message, file, button, and textarea elements.
  • An event listener for the button element that performs the following actions when clicked:
    • Displays a "Loading" message in the message h2.
    • Reads the selected file using the FileReader API.
    • Converts the file to a Base64 string.
    • Sends a POST request to the AppScript API with the Base64 string, file type, and file name as parameters.
    • Displays the resulting text in the textarea element.
    • Clears the message h2.

Video Description

OCR - Image and PDF to Text using JavaScript and Appscript | Optical Character Recognition. In this tutorial, we will explore how to perform Optical Character Recognition (OCR) on images and PDFs using JavaScript and Appscript. OCR is a powerful technique that allows us to extract text from images and PDFs and convert them into editable and searchable text documents.

We will be using JavaScript and Appscript to implement the OCR process. We will walk through the process of setting up a development environment for JavaScript and Appscript, writing JavaScript code to perform OCR, and testing our code with sample images and PDFs. We will use JavaScript and Appscript to automate the process of uploading images and PDFs, running the OCR process, and Displaying the output in textarea.

By the end of this tutorial, you will have a solid understanding of how OCR works and how to implement it using JavaScript and Appscript. This tutorial is suitable for beginners who are interested in learning about OCR and how to use JavaScript and Appscript to automate repetitive tasks.

Tags : Optical Character Recognition OCR Google Vision API Google Drive API JavaScript Google Apps Script Image processing PDF processing Text extraction Image to text PDF to text Data processing Data extraction OCR application development Image recognition PDF recognition Google Cloud Platform Text extraction libraries Google Vision API tutorial Google Drive API tutorial

Newer Post Older Post Home

Popular Posts