How to use tesseract.js on a base64 encoded image - javascript

I'm working on a personal project where I'm given a base64 string that is some image. I'm trying to run tesseract OCR on that image, however, I'm not sure how to do that.
var base64String = 'data:image/jpg;base64,' + givenImage;
var buffer = Buffer.from(base64String, 'base64');
var output = tesseract.recognize(buffer);
return output;
This doesn't seem to work at all and I'm not really sure why. This is run on a node.js server.

I think you're very nearly there. When parsing the base64 string, you just need to omit the 'data:image/jpg;base64,' prefix.
e.g.
var base64String = givenImage;
Here's a full example of recognizing text from an image encoded as a base64 string:
const { createWorker } = require ('tesseract.js');
let base64 = `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`;
let imageBuffer = Buffer.from(base64, "base64");
const worker = createWorker({
logger: m => console.log(m)
});
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
console.log("Recognizing...");
const { data: { text } } = await worker.recognize(imageBuffer);
console.log("Recognized text:", text);
await worker.terminate();
})();

Related

convert screenshot taken from protractor to pdf

I have a small code written using protractor to take screenshot. But I want to save that screenshot as a pdf. Below is my code.
await browser.get(url);
const img = await browser.takeScreenshot();
const buf = Buffer.from(img, 'base64');
writeFile("example.pdf",buf,(err)=>{
if (err)
console.log(err);
else {
console.log("File written successfully\n");
console.log("The written has the following contents:");
console.log(readFileSync("example.pdf", "utf8"));
}
});
but the file seems corrupted. I'm getting below error when I opened the file.
So how can I convert the image I'm getting from this line const img = await browser.takeScreenshot(); to pdf ?
You can't directly save image as pdf file. You need to use a conversion too like jspdf. Here is sample code:
const { jsPDF } = require("jspdf")
const fs = require("fs")
const doc = new jsPDF();
// await browser.get(url);
// const image = await browser.takeScreenshot();
const image = fs.readFileSync("./image.jpg")
const buf = Buffer.from(image, 'base64');
doc.addImage(buf, "jpg", 5, 5)
doc.save("result.pdf");

How can I display an Image without downloading it from a url in NodeJS?

In NodeJS I used package named node-fetch, also for taking JSON Response, but how about an Image response? How can I do that? In my current codes, It does only save the image not showing like PIL from python.
var tr = "https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI"
export async function get_image() {
const get_url = await fetch(tr)
const image = get_url.body.pipe(fs.createWriteStream('./image.png'))
}
await get_image();
You can get an image in Base64 format and save it in a variable using the axios module like so:
const axios = require('axios')
const imageURL = 'https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI';
(async ()=>{
// Get image Buffer from url and convert to Base64
const image = await axios.get(imageURL, {responseType: 'arraybuffer'});
const base64Image = Buffer.from(image.data).toString('base64');
// Do stuff with result...
console.log(base64Image);
})();
// Or if you prefer, a one liner
(async ()=>{
const base64Image = Buffer.from((await axios.get(imageURL, {responseType: 'arraybuffer'})).data).toString('base64');
})();
You can check if it worked by using a website to decode the base64 string into an image.

Reading excel file fetch API

I am trying to read a excel file and create one locally. I have the below code
(async function () {
const fetchPromise = fetch(url);
let stream = await fetchPromise;
let reader = stream.body.getReader();
let decoder = new TextDecoder();
while(true) {
const {done, value} = await reader.read();
if (done){
break;
}
let res = decoder.decode(value, {stream: true, ignoreBOM: false});
console.log(res);
}
})();
I am seeing garbled characters when printing value of variable res.
when i execute file -I on the source file i am trying to read + create locally i see
count-3.xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=binary
What encoding scheme should i be passing to TextDecoder so i do not see garbled characters?

Convert image buffer to base64

I am resizing base64 image with jimp:
const buffer = Buffer.from(Photo, 'base64');
const { mime } = fileType(buffer);
const photoBuffer = await jimp.read(buffer);
const res = await photoBuffer.cover(10, 10)
.quality(30).getBufferAsync(mime);
now I need to conver 'res' buffer back to base64.
Just use toString method of Buffer like this:
const resInBase64 = res.toString('base64')

Downloading an Azure Storage Blob using pure JavaScript and Azure-Storage-Js

I'm trying to do this with just pure Javascript and the SDK. I am not using Node.js. I'm converting my application from v2 to v10 of the SDK azure-storage-js-v10
The azure-storage.blob.js bundled file is compatible with UMD
standard, if no module system is found, following global variable
will be exported: azblob
My code is here:
const serviceURL = new azblob.ServiceURL(`https://${account}.blob.core.windows.net${accountSas}`, pipeline);
const containerName = "container";
const containerURL = azblob.ContainerURL.fromServiceURL(serviceURL, containerName);
const blobURL = azblob.BlobURL.fromContainerURL(containerURL, blobName);
const downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);
The downloadBlobResponse looks like this:
downloadBlobResponse
Using v10, how can I convert the downloadBlobResponse into a new blob so it can be used in the FileSaver saveAs() function?
In azure-storage-js-v2 this code worked on smaller files:
let readStream = blobService.createReadStream(containerName, blobName, (err, res) => {
if (error) {
// Handle read blob error
}
});
// Use event listener to receive data
readStream.on('data', data => {
// Uint8Array retrieved
// Convert the array back into a blob
var newBlob = new Blob([new Uint8Array(data)]);
// Saves file to the user's downloads directory
saveAs(newBlob, blobName); // FileSaver.js
});
I've tried everything to get v10 working, any help would be greatly appreciated.
Thanks,
You need to get the body by await blobBody.
downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);
// data is a browser Blob type
const data = await downloadBlobResponse.blobBody;
Thanx Mike Coop and Xiaoning Liu!
I was busy making a Vuejs plugin to download blobs from a storage account. Thanx to you, I was able to make this work.
var FileSaver = require('file-saver');
const { BlobServiceClient } = require("#azure/storage-blob");
const downloadButton = document.getElementById("download-button");
const downloadFiles = async() => {
try {
if (fileList.selectedOptions.length > 0) {
reportStatus("Downloading files...");
for await (const option of fileList.selectedOptions) {
var blobName = option.text;
const account = '<account name>';
const sas = '<blob sas token>';
const containerName = '< container name>';
const blobServiceClient = new BlobServiceClient(`https://${account}.blob.core.windows.net${sas}`);
const containerClient = blobServiceClient.getContainerClient(containerName);
const blobClient = containerClient.getBlobClient(blobName);
const downloadBlockBlobResponse = await blobClient.download(blobName, 0, undefined);
const data = await downloadBlockBlobResponse.blobBody;
// Saves file to the user's downloads directory
FileSaver.saveAs(data, blobName); // FileSaver.js
}
reportStatus("Done.");
listFiles();
} else {
reportStatus("No files selected.");
}
} catch (error) {
reportStatus(error.message);
}
};
downloadButton.addEventListener("click", downloadFiles);
Thanks Xiaoning Liu!
I'm still learning about async javascript functions and promises. Guess I was just missing another "await". I saw that "downloadBlobResponse.blobBody" was a promise and also a blob type, but, I couldn't figure out why it wouldn't convert to a new blob. I kept getting the "Iterator getter is not callable" error.
Here's my final working solution:
// Create a BlobURL
const blobURL = azblob.BlobURL.fromContainerURL(containerURL, blobName);
// Download blob
downloadBlobResponse = await blobURL.download(azblob.Aborter.none, 0);
// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody
const data = await downloadBlobResponse.blobBody;
// Saves file to the user's downloads directory
saveAs(data, blobName); // FileSaver.js

Categories