Reputation: 93
I want to extract all the information which I can get from an image so if that image contains:
Name : john doe
Dob : 12/12/2012
After user has uploads that image I want to extract those two pieces of information on two variables and store those in my database. I have tried Orcad.js but that did not work for me :(. Are there other methods to extract text from an image and store it via JavaScript?
Upvotes: 6
Views: 20721
Reputation: 1502
If you want a client-side solution that works in the browser (just importing cdn), you have 2 possibilities:
Tesseract, very powerful but can't read text in a table/grid https://tesseract-ocr.github.io/tessdoc/ImproveQuality.html#tables-recognitions It is known tesseract has problem to recognize text/data from tables
Ocrad.js, generally has weaker recognition and you can preprocess the image (so it's OK for me) BUT has fixed this big problem with tables/grids ! For this one, I wrote a code https://github.com/desousar/OcradJS_use_strict I corrected the original repo code (https://github.com/antimatter15/ocrad.js) to avoid Octal literals on "use strict" env
Here my code for Ocrad.js
<!-- <script src="https://antimatter15.com/ocrad.js/ocrad.js"></script> -->
<script src="https://cdn.jsdelivr.net/gh/desousar/OcradJS_use_strict@v2/ocrad.js"></script>
<h1>Utilisation d'OCRad.js avec une image</h1>
<input type="file" id="imageInput">
<pre id="result"></pre>
<script>
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const upscaleBy = 1
canvas.width = image.width * upscaleBy;
canvas.height = image.height * upscaleBy;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];
const brightness = (r + g + b) / 3;
const bw = brightness < 128 ? brightness : 255;
imageData.data[i] = bw;
imageData.data[i + 1] = bw;
imageData.data[i + 2] = bw;
}
ctx.putImageData(imageData, 0, 0);
const base64Image = canvas.toDataURL('image/jpeg', 1);
const image2 = new Image();
image2.onload = function() {
const result = OCRAD(image2);
document.getElementById('result').textContent = result;
};
image2.src = base64Image;
};
image.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}
document.getElementById('imageInput').addEventListener('change', function() {
readImage(this);
});
</script>
Here is my code for Tesseract
await Promise.all([
// Import Tesseract.js
import('https://unpkg.com/[email protected]/dist/tesseract.min.js')
])
async function imageProcess(file){
// Load image and convert it to an image object
const img = new Image();
img.src = URL.createObjectURL(file);
// Wait for the image to load
await new Promise(resolve => {
img.onload = resolve;
});
// Create a canvas to draw the enlarged image
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const upscaleBy = 2
// Enlarge the image by doubling its size
canvas.width = img.width * upscaleBy;
canvas.height = img.height * upscaleBy;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Convert canvas to Blob object
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 1));
// Use Tesseract.js to recognize the text in the enlarged image
const result = await Tesseract.recognize(blob, 'eng');
const text = result?.data?.text;
return text;
}
Upvotes: 4
Reputation: 3759
Javascript is a whole computer language (despite criticism against it) and since the arrival of NodeJS, simply saying Javascript doesn't communicate to the community whether you're trying to do this in the browser or on your server.
The functionality that you're describing is optical character recognition (OCR). Does Javacript have it built-in? No. That's the short answer to your question.
Is it possible to do this using the Javascript language? Yes, but you'll have to work to make it work. As you've already discovered, there are projects like Ocrad.js which implement the OCR algorithm's in Javascript and run right in your browser. That demo seems to work reasonably well for me. Care to elaborate on the specific issues you encountered?
On the other, more obvious end of the spectrum, if you're running Javascript on your server, then you can use Javascript to write OCR code (much like Ocrad), or you can delegate it to some application you can download and run on your server like OCR4Linux.
Upvotes: 10