Farbod pm

Color Detection using HSV image in python,Opencv

Today, we are going to talk about color detection in opencv using python. As you know RGB format is a very regular color format these days. But there are other image color spaces that each one has their own advantages and disadvantages. In this situation , HSV color space would be very useful because of showing the colors. For more information check wikipedia.

Now, we are talking about the code. First of all we have to read the image using imread function. Then changing the color space using cvtColor function and after all some noise reduction using erosion and dilate functions.

import cv2
import numpy as np 
from google.colab.patches import cv2_imshow

img = cv2.imread("/content/JSjbB.png")
img_output = img
frame_hsv = cv2.cvtColor(img_output, cv2.COLOR_BGR2HSV)
frame_hsv_blur = cv2.GaussianBlur(frame_hsv, (7, 7), 0)
lower_values = np.array([130, 100,0])
upper_values = np.array([170,255, 255])
mask = cv2.inRange(frame_hsv_blur, lower_values, upper_values)
kernel = np.ones((5,5),np.uint8)
erosion = cv2.erode(mask,kernel,iterations = 3)
dilation = cv2.dilate(erosion,kernel,iterations = 3)

The result will be some thing like this.

last result

And this would be tha result before erosion and dilate.

Resize and Flip images using OpenCV in python

Resizing and fliping codes

Resizing and Flipping images would be very useful when you are working on creating new database for training a CNN, RNN or deep learning algorithms. For example I was working with many images that my Prof captured from wheat plants. We were going to apply CNN algorithm to that images. But the number of the images was too low so I put them in an Folder and ran the below code.

import glob
import cv2
file_path = glob.glob("/content/drive/My Drive/Data/Yellow/*")
for file in file_path:
  img = cv2.imread(file)
  #crop_img = img[0:400, 0:300] # Crop from {x, y, w, h } => {0, 0, 300, 400}
  # perform the actual resizing of the image and show it
  #resized = cv2.resize(image, dim, interpolation = cv2.INTER_AREA)
  img_rotate_90_clockwise = cv2.rotate(img, cv2.ROTATE_90_CLOCKWISE)
  cv2.imwrite(file+'_cv_rotate_90_clockwise.jpg', img_rotate_90_clockwise)
  # True

  img_rotate_90_counterclockwise = cv2.rotate(img, cv2.ROTATE_90_COUNTERCLOCKWISE)
  cv2.imwrite(file+'_cv_rotate_90_counterclockwise.jpg', img_rotate_90_counterclockwise)
  # True

  img_rotate_180 = cv2.rotate(img, cv2.ROTATE_180)
  cv2.imwrite(file+'_cv_rotate_180.jpg', img_rotate_180)

As you can see I tried to find all of the files path using “glob” library. Next, I tried to read the images using “imread” function. Also trying to resize them using “resize” function. Finally , save the files using “imwrite” function.

More information

Don not forget that you need opencv library to do these stuff. if you are new in image processing go to our instagram page. Also you can see our related pages here.

Canny edge detector OpenCV.js

Today I am going to talk about Canny filter. Canny is a edge detector in image processing. It has been developed by John F.Canny in 1986. He also produced a computational theory of edge detection explaining why the technique works.

In OpenCV library Canny operator can be really helpful especially when you are going to detect a Line or circle in a very simple picture with low noise. It is also really popular algorithm for applying to your pictures and post it on Instagram. Canny function in OpenCV has six argument.


image8-bit input image.
edgesoutput edge map; single channels 8-bit image, which has the same size as image.
threshold1first threshold for the hysteresis procedure.
threshold2second threshold for the hysteresis procedure..
apertureSizeaperture size for the Sobel operator.
L2gradientspecifies the equation for finding gradient magnitude. If it is True, it uses the equation mentioned above which is more accurate, otherwise it uses this function: Edge_Gradient(G)=|Gx|+|Gy|.

if you’re going to install OpenCV.js right now follow out installation tutorial here.

Now lets see how to use canny detector in OpenCV.js. All you need to use Canny filter is this code:

>>cv.Canny(src, dst, 50, 100, 3, false);
First parameter is source image that you choose it by:

let imgElement = document.getElementById(‘imageSrc’);
let src = cv.imread(imgElement);

The second parameter is output image. Other argument are First and second threshold numbers and Not to use L2Gradiant. that’s it. check the code and enjoy.

OpenCV in Web Programming

Here we are going to discuss about the most incredible feature that OpenCV library has newly. The good news is that you can run image processing code using JavaScript code. So it would be very simple to have image processing feature for websites and I think that is awesome. Feel free and leave comment your opinion about this feature. because I really love this feature I will try to share tutorials about image processing in JS.

How to install Opencv-JS

First of all we need the OpenCV sources. To build JS file you should install emscripten. Installation is really easy just check this link. Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins. This is a really useful SDK and I would like to share more about it in later posts.

The next Step is like following:

1.To build opencv.js, execute python script <opencv_src_dir>/platforms/js/build_js.py <build_dir>. For example, to build in build_js directory:

>>cd opencv

>>python ./platforms/js/build_js.py build_js

Note: It requires python and cmake installed in your development environment.

2.The build script builds asm.js version by default. To build WebAssembly version, append --build_wasm switch. For example, to build wasm version in build_wasm directory:

>> python ./platforms/js/build_js.py build_wasm –build_wasm

[optional] To build documents, append --build_doc option. For example: >>python ./platforms/js/build_js.py build_js –build_doc

Note: It requires doxygen installed in your development environment.

[optional] To build tests, append --build_test option. For example: python ./platforms/js/build_js.py build_js –build_testTo run tests, launch a local web server in <build_dir>/bin folder. For example, node http-server which serves on localhost:8080. Navigate the web browser to http://localhost:8080/tests.html, which runs the unit tests automatically. You can also run tests using Node.js. For example: cd binnpm installnode tests.jsNoteIt requires node installed in your development environment.

Now you can test your code. Take a photo from you and draw a red rectangular boarder around it. It’s really simple and fun. you can download the pre-built library in this link