Create a simple image search engine in OpenCV and Flask
Tags: posts, imageprocessing, opencv, python
Published: 2019-12-23 18:25:59

---
title: Create a simple image search engine in OpenCV and Flask
published: true
date: 2019-09-08 13:40:22 UTC
tags: Posts,image processing,opencv,Python
canonical_url: http://blog.adnansiddiqi.me/create-a-simplest-image-search-engine-in-opencv-and-flask/
---

I recently started playing with [OpenCV](https://opencv.org/about/), an open-source Computer Vision library for image processing. Luckily there are Python bindings available. More luck that the guys like [Adrian](https://www.pyimagesearch.com/author/adrian/) has done a great service by releasing both book and [blog](https://www.pyimagesearch.com/) on a similar topic.

So what is it all about? Well, it is simple, or I say, the simplest demonstration of using OpenCV to load an image and finding color-related to that image and show insights in a Flask based web application. This is not a state of art application neither it is currently serving the way I intend to do but hey, it is just a start, not the end. I could not find a better excuse other than converting my basic learning of pixels into a _ **product** (Google! Beware!!)_

I am not going int nitty-gritty details of both OpenCV and Flask and I will be covering what the application is actually doing.

The app consists of two parts: a Web-based application that is used to store images from Web and display processed images and their dominant colors and a command-line script that is run on the downloaded image and extract color codes. The web image looks like below:

![](http://blog.adnansiddiqi.me/wp-content/uploads/2019/09/Screen-Shot-2019-09-08-at-2.01.41-PM.png)

You search images by color code and it returns the result, something like below:

![](http://blog.adnansiddiqi.me/wp-content/uploads/2019/09/Screen-Shot-2019-09-08-at-2.06.04-PM.png)

And the view of the single image looks like:

![](http://blog.adnansiddiqi.me/wp-content/uploads/2019/09/Screen-Shot-2019-09-08-at-2.44.46-PM.png)

 

Let’s discuss the core part of the system that is, the command-line script that is doing the main work.

```
def process\_image(image\_name): color\_count = {} print('Processing the image {}'.format(image\_name)) path = 'website/static/uploaded\_images/' + image\_name image = cv2.imread(path) for i in range(image.shape[0]): for j in range(image.shape[1]): (b, g, r) = image[i, j] h\_value = rgb2hex(r, g, b) if h\_value in color\_count: color\_count[h\_value] += 1 else: color\_count[h\_value] = 1 return color\_count
```

After importing computer-vision we read the image from the disk by calling `cv2.imread()`. The data is available in the form of `numpy` array hence using it’s `shape` method to find details like width, heights, and channel. By the way, OpenCV stores image data in BGR format instead of RGB color space. Once the data is retrieved in BGR format, we are using a custom `rgb2hex` method to convert RGB to HEX color. The function then returns a list  of dictionaries consist of color code in HEX and its frequency which we will use to find the percentages of color in an image. I have also made a demo which can see below.

<iframe width="560" height="315" src="https://www.youtube.com/embed/gG0uVcYGpDc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Conclusion

So this was a basic image processing tutorial in OpenCV. It is not a mature product as it can’t tell you about unique colors in a picture. It is just telling you informaiton based on pixel colors rather than performing color segmentation and clustering based on a ML algorithm.

Hopefully I will be discussing OpenCV furhter in coming weeks on further advanced topics.

Like always, the code is available on [Github](https://github.com/kadnan/ImageInsights).