Optical Character Recognition with Laravel and Google Cloud Vision | Tutorial

Ever wondered how you could read text from an image? Maybe you’re building a traffic application where you need to read plate numbers from snapshots of cars or something as simple as extracting text from snapshots of PDF files. Whatever the case may be, it would be extremely difficult and time consuming to carry out such a task manually. Thankfully, computer vision has made it possible for computers to recognize text and characters from what it sees, just like the human eye via a concept called optical character recognition.

In this tutorial, I will show you how to easily read text from images directly from you Laravel application. We will be making use of Google’s Cloud Vision API. This robust API allows us to perform other forms of image analysis that I will not cover in this post. However, feel free to explore this API here:

Prerequisites

Before we embark on this journey, lets make sure you have all the tools that you need. Here’s a checklist of all the things you should have ;

1. An account with Google and a Google cloud console project. See here to learn how to set up a Google cloud console project. Make sure to enable the vision API for your project. Click here to see how.
2. An API key for your Google cloud console project. Click here to see how to get your API key.
3. Php and composer installed on your development environment
4. A cup of coffee because why not

Getting Started

Create a new laravel project by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel OCRproject

After all the dependencies have been installed and the project has been created, navigate to the newly created project folder and run the following command:

composer require wapnen/google-cloud-vision-php

This will install a php package that we will use to send requests to the Google Cloud Vision API. You can find this package on Github and packagist. Add your google cloud project API key to your .env file like so

GOOGLE_CLOUD_KEY=your_api_key

Now you can serve your laravel application by running the following command in your terminal:

php artisan serve

We will now create a controller where we will implement our annotation logic. To do so, run the following command in your terminal:

php artisan make:controller AnnotationController

Register the following methods in your routes/web.php

Route::get('/annotate', 'AnnotationController@displayForm');
Route::post('/annotate', 'AnnotationController@annotateImage');

The first line above will redirect us to a page which contains the form for uploading the image. The second line will post the image to our controller’s annotate method where we will implement the logic for annotation. Create a file in your views, save it as annotate.blade.php . Paste the code below in that file to create the form.

Navigate to the `AnnotationController.php that we created later and replace the code with the following:

Now let me explain. The snippet of code above creates a single AnnotateImageRequest() object. the setImage() function takes a base64encoded image string as a parameter. This is the image to be annotated. the setFeature() function sets type of Google Cloud Vision API detection to perform on the image. Since we are performing OCR, we only need to set the TEXT_DETECTION feature. (Note: if the image is a document, use DOCUMENT_TEXT_DETECTION instead). You can set as many features as you want by calling the setFeature() function on the AnnotateImageRequest()and passing the corresponding feature. Check the Google cloud vision api reference for available features.

The GoogleCloudVision() object takes an array of AnnotateImageRequest() objects as the first parameter and your API key as a second parameter. Finally we called the annotate() function to send the image to google cloud where the magic happens.

Testing

Okay! now everything is in place. In your browser, navigate to the url http://localhost:8000/annotate . Depending on your local environment’s set up, this url may be different. Upload an image containing text and submit. If you used the image which I used (download here ) , you will get a result resembling the one below:

{"description":"You and me\nGOT A\nwhole lotol\nHISTORY\n"}

Conclusion

Hope you liked it! There’s so much more that you can do with Google Cloud Vision. Check it out here. Feel free to leave a comment or ask a question. Head over here to get the full source code. Ciao, I have to go now but if you need me, you can find me on twitter .