Image edge detection for Web Apps

Image edge detection is a fundamental part of many computer vision and image processing algorithms. The edges describe the shape of the objects and therefore they carry valuable information about the picture.

Popular edge detection techniques

One of the most popular algorithms for edge detection are the gradient operators.

First-order gradient operators

Some of the most popular first-order gradient detection operators are:

1. Prewitt operator
2. Sobel operator
3. Schaar operator

Second-order operators

The edge detectors from this group use the second-order derivative of image intensity. This means that they detect the rate of change in intensity, since the maximum of the gradient coincides with zero-crossing in the second derivative.
Popular algorithms are:

1. Laplacian of Gauss
2. Difference of Gauss (DoG)
3. Marr–Hildreth algorithm

How to make edge detector for the web?

Nowadays, it is possible to use modern web technologies to perform image analysis in a browser. The advanced HTML5 standard is widely supported in most popular platforms and this provides many opportunities.

Image filtering using CSS

The CSS filter property allows you to apply effects to images and various parts of HTML content such as borders and background.
Unfortunately this is not much of an use for image analysis and machine vision.

Edge detection with HTML5 Canvas

The HTML5 Canvas element is a powerful tool that provides access to raw image data. Due to this we can use vanilla JavaScript to manipulate and analyze images online.

Image analysis with WebGL

WebGL (Web Graphics Library) is another web technology that enables high-performance image processing. The best part about it is that it works without plugins, so we can use the direct JavaScript API to manipulate pixel data.

Online image processing apps

If you are interested in image processing, you can see these online graphics apps. In addition to applications, this project offers free tutorials and image analysis algorithms.