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.
Replace "_YOUR_APPSCRIPT_API_HERE_" with your api url.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
.ocr{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}
.ocr *{
margin-top: 5px;
}
.text{
width: 80%;
height: 150px;
}
</style>
</head>
<body>
<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>
</div>
<script>
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");
btn.addEventListener('click',()=>{
msg.innerHTML=`Loading..`;
let fr = new FileReader();
fr.readAsDataURL(file.files[0])
fr.onload=()=>{
let res = fr.result;
let b64 = res.split("base64,")[1];
fetch(api,{
method:"POST",
body:JSON.stringify({
file:b64,
type:file.files[0].type,
name:file.files[0].name
})
})
.then(res => res.text())
.then(data => {
text.innerHTML=data;
msg.innerHTML=``;
});
}
})
</script>
</body>
</html>
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.
The CSS styling for the OCR tool includes:
The HTML structure for the OCR tool includes:
The JavaScript functionality for the OCR tool includes:
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