Farbod pm

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