The relationship between image and filter

Http://www.ruanyifeng.com/blog/2017/12/image-and-wave-filters.html

I have always been interested in image processing and have written several blogs (1,2,3,4).

Read an article a few days ago, it mentions that the image is actually a wave, you can use the wave algorithm to process the image. I suddenly have a kind of clairvoyant feeling, never thought that these two fields are related, the image can also play this way. Let me introduce this article in detail below. First, why the image is a wave.

We know that images are made up of pixels. The image below is a picture of X 400, which contains 160,000 pixels in total.

The color of each pixel can be described in red, green, blue, transparency four values, size range is 0 ~ 255, such as Black is [0, 0, 0, 255], White is [255, 255, 255, 255]. These values can be obtained through the Canvas API.

If you put the red, green, and blue values of all the pixels in each row (400 above), and then draw three curves in turn, you get the following figure.

As you can see, each curve is constantly fluctuating up and down. Some areas are less volatile, and some regions have suddenly seen large fluctuations (such as the two points of 54 and 324).

A comparison of the image can be found that the curve of the larger fluctuations in the place, but also the image of the mutation.

This shows that the fluctuations are closely related to the image. The image is essentially the superposition of various color waves. Second, frequency

To sum up, the image is the fluctuation of color: large fluctuations, is the color changes sharply, small fluctuations, is the smooth color transition. Therefore, the various indicators of the wave can be used to describe the image.

Frequency (frequency) is the index of fluctuation speed, the more fluctuations in unit time, the higher the frequency, the lower the reverse.

The graph above is the function sin (Θ), which completes a fluctuation in the 2π cycle, with a frequency of 1.

The graph above is the function sin (2Θ), which completes two fluctuations in the 2π cycle, and the frequency is 2.

Therefore, the place where the color changes drastically is the high frequency area of the image, and the place where the color is stable and smooth is the low frequency area. Third, filter

Physics's research into waves has been very deep, and many methods have been proposed to deal with waves, including filters, which filter out certain waves and keep other waves.

The following are the two common types of filters. Low-pass filter (lowpass): attenuates or blocks high-frequency signals, retains low-frequency signal pass-through filters (highpass): Reduces or blocks low-frequency signals, retains high-frequency signals

Below is an example of low-pass filtering.

In the image above, the Blue Line is the original waveform, and the Green Line is the waveform after the low-pass filter lowpass. As you can see, the Green Line fluctuates a lot smaller than the Blue line and is very smooth.

The following is an example of high-pass filtering.

In the image above, the Yellow Line is the original waveform, and the Blue Line is the waveform after the high-pass filter highpass. As you can see, the three peaks of the Yellow Line and two troughs (low frequency fluctuations) disappear on the blue line, while the dense small fluctuations (high frequency fluctuations) on the yellow Line are all reserved by the Blue line.

Let's look at an example.

The above figure has three curves, the yellow line is the high frequency fluctuation, the red wire is the low frequency fluctuation. They can be combined into a curve, the Green Line.

Above, the Green line is low-pass filtering and high-pass filtering, resulting in two black curves, their waveforms are exactly the same as the original yellow and red lines. Four, the image filtering

The browser actually contains the implementation of the filter, because the Web Audio API defines the filtering of the sound waves. This means that lowpass and highpass can be applied to images through a browser.

Lowpass makes the high-frequency area of the image become low-frequency, that is, the area of intense color change becomes smooth, that is, the blur effect appears.

Above, the red line is the original color curve, the blue line is the low-pass filter after the curve.

Highpass, on the contrary, filters the low frequencies, preserving only those regions where the fastest and most drastic changes, that is, the edges of objects inside the image, are often used for edge recognition.

Above, the red line is the original color curve, the blue line is the high-pass filter after the curve.

Below this URL, you can drag the filter onto the image, resulting in a filtered effect.

Browser implementation of the filter sample code, you can see this warehouse.

Finish