JavaScript image processing: Edge gradient computation

Objective

In the previous article, we explained the expansion and corrosion function in image processing, which will do the edge gradient calculation function. Direct excerpt from OpenCV 2.4+ C + + Edge gradient calculation.

Edge of Image

How is the edge of the image represented mathematically?

On the edge of the image, the adjacent pixel value should be significantly changed. In mathematics, the derivative is a means of changing the speed. The large variation of the gradient value indicates a significant change in the content of the image.

With a more vivid image to explain, suppose we have a one-dimensional graph. The "Jump" of the grayscale value in the following figure indicates the existence of the edge:

By using a derivative of the first order we can see more clearly the existence of the edge "Jump" (shown here as the peak value):