CODEWITHSUNDEEP
javascript
sadman saleh
sadman saleh

Reputation: 93

How to extract text from an image using JavaScript

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: 20722

Answers (2)

zerbene
zerbene

Reputation: 1502

If you want a client-side solution that works in the browser (just importing cdn), you have 2 possibilities:

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

jeteon
jeteon

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

Related Questions