This online edge recognition app demonstrates how popular gradient operators work on a variety of images and videos.
With this tool you can test how the contours of objects are extracted from images using various algorithms and parameters. You can choose some of the most famous edge detectors like: Prewitt, Sobel-Feldman filter and Scharr.
See our online test gallery to learn how to use the generic options.
Configure the filter
This tool has the following UI controls to help configure the gradient detection filter:
- Sigma – controls the standard deviation of the Gaussian kernels. The higher the value, the stronger the effect of the filter.
- Filter – here you can switch and compare different gradient operators:
- Prewitt operator
- Sobel-Feldman operator
- Scharr operator
- Mode – use this dropdown to select the edge detection configuration
- Generic – this mode is the generic one – all gradient directions (horizontal and vertical) without NMS (edge non-maximum suppression)
- Generic with NMS – this option also extracts edges in both directions, but as the next step makes NMS
- Horizontal – extracts horizontal image gradient
- Vertical – extracts vertical image gradient
How does the demo work?
The gradient filtering is a well-known contour image processing technique. These operators are fast and quite accurate and give good results for edge detection.
Our demo app performs the following steps to extract image edges using the selected filter:
- The tool loads an image into memory using HTML Canvas element.
- As a second step we reduce image noise with Gaussian filter.
- As a next step we apply a gradient operator by WebGL shader.
- In case of non-maximum suppression, perform a procedure to thin the edges
- Finally, the app renders the resulting texture onto a 2D Canvas element
var sigma = 2.0; // E.g. standard deviation = 2.0 var fivekogfx = new FivekoGFX(); fivekogfx.load(canvas); fivekogfx.gauss(sigma); fivekogfx.sobel(); fivekogfx.draw(canvas);
See more online apps
Visit the detailed Sobel operator tutorial
You can explore the API to read more details.