Google Mobile Vision Text API Example

By jacksparrow September 27, 2024

Introduction

Google Mobile Vision API is a powerful tool that allows developers to extract text from images. This API can be used in a wide range of applications, such as OCR (Optical Character Recognition), document scanning, and image search. In this article, we will demonstrate a simple example of how to use the Google Mobile Vision Text API in a web application.

Setting Up

To use the Google Mobile Vision Text API, you will need to:

Enable the Google Cloud Vision API in your Google Cloud Platform project.
Create an API key and enable billing for your project.
Include the Google Cloud Vision API JavaScript client library in your HTML file.

Code Example

Here is a basic HTML code example that demonstrates how to use the Google Mobile Vision Text API to extract text from an uploaded image:

<!DOCTYPE html>
<html>
<head>
<title>Google Mobile Vision Text API Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<input type="file" id="imageUpload">
<button id="extractText">Extract Text</button>
<div id="result"></div>

<script>
  document.getElementById('extractText').addEventListener('click', function() {
    const fileInput = document.getElementById('imageUpload');
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
      const imageData = e.target.result;
      extractTextFromImage(imageData);
    }

    reader.readAsDataURL(file);
  });

  async function extractTextFromImage(imageData) {
    const apiKey = 'YOUR_API_KEY';
    const requestBody = {
      requests: [
        {
          image: {
            content: imageData
          },
          features: [
            {
              type: 'TEXT_DETECTION'
            }
          ]
        }
      ]
    };
    
    try {
      const response = await axios.post('https://vision.googleapis.com/v1/images:annotate', requestBody, {
        headers: {
          'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json'
        }
      });
      
      const text = response.data.responses[0].textAnnotations[0].description;
      document.getElementById('result').textContent = text;
    } catch (error) {
      console.error(error);
    }
  }
</script>
</body>
</html>

This code will first display an input field for uploading an image and a button to trigger text extraction. When you select an image and click the button, the code will read the image data, make a request to the Google Cloud Vision API, and then display the extracted text in the result div.

Explanation

Image Upload: An input field allows the user to select an image from their local device.
Text Extraction: The extractTextFromImage function makes a POST request to the Google Cloud Vision API, sending the image data and requesting text detection.
API Request: The request body includes the image data and a request for TEXT_DETECTION features. This indicates that we want the API to analyze the image for text.
API Response: The response from the API includes an array of text annotations. The first annotation (textAnnotations[0]) typically contains the detected text.
Display Text: The extracted text is then displayed in the result div.

Key Points

API Key: Replace YOUR_API_KEY with your actual Google Cloud Vision API key.
Image Format: The image data should be in a supported format (e.g., JPG, PNG).
Error Handling: The code includes basic error handling, but you should implement more robust error handling in a production environment.

Conclusion

The Google Mobile Vision Text API is a powerful tool that enables developers to add text recognition capabilities to their web applications. This example provides a basic understanding of how to use the API to extract text from images. You can further enhance this example by incorporating features such as language detection, bounding box information, and text formatting.

Post Views: 6

Google Mobile Vision Text API Example