Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "CSS filter and front-end filter example analysis". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Many websites have been replaced with gray tones, such as Taobao Baidu Nuggets Zhihu, etc. Through field visits, grayscale technologies without exception use the following CSS, such as Taobao:

Html {

-webkit-filter: grayscale

Filter: progid:DXImageTransform.Microsoft.BasicImage (grayscale=1)

}

The first line is valid for non-IE browsers, and the second line is for IE browsers (emmm... It seems that browsers are divided into two types), which essentially use the grayscale property of filter to achieve grayscale effect, which is a commonly used image filter. Open PS to see a variety of filters to choose from:

Through the filter of CSS, some filter effects can be realized, such as grayscale, Gaussian blur and so on.

At this time, you may ask, the web page is not a picture, there may be a lot of text, why can you also apply the filter of the picture? In fact, web pages are rasterized into Canvas bitmaps and then drawn on the screen before they are rendered to the screen, so filter is dealing with this bitmap.

Through the Chromium source code, we can see that the implementation of the relevant filter actually uses an image matrix to convert the original bitmap, as shown in the following code:

Void GetGrayscaleMatrix (float amount, float matrix [20]) {

/ / Note, these values are computed to ensure MatrixNeedsClamping is false

/ / for amount in [0..1]

Matrix [0] = 0.2126f + 0.7874f * amount

Matrix [1] = 0.7152f-0.7152f * amount

Matrix [2] = 1.f-(matrix [0] + matrix [1])

Matrix [3] = matrix [4] = 0.f

Matrix [5] = 0.2126f-0.2126f * amount

Matrix [6] = 0.7152f + 0.2848f * amount

Matrix [7] = 1.f-(matrix [5] + matrix [6])

Matrix [8] = matrix [9] = 0.f

Matrix [10] = 0.2126f-0.2126f * amount

Matrix [11] = 0.7152f-0.7152f * amount

Matrix [12] = 1.f-(matrix [10] + matrix [11])

Matrix [13] = matrix [14] = 0.f

Matrix [15] = matrix [16] = matrix [17] = matrix [19] = 0.f

Matrix [18] = 1.f

}

This is the matrix acquisition method for grayscale grayscale. If the value of CSS is 1 (1-amount = 0 for the above parameters, and the difference between and 1 is used when the code passes parameters), the following matrix will be obtained:

This matrix is used to convert each pixel. Assuming that the pixel value of a pixel is rgba (255,119,50,0.5), then the pixel conversion is calculated as follows:

(the last w is an additional transformation parameter with a default value of 1, which is not used in the grayscale transformation, so the last row of the matrix is 0.)

In fact, each RGB is calculated as follows:

R/G/B = 255 * 0.2126 + 119 * 0.7152 + 50 * 0.0722

Even with the formula:

This is actually the grayscale algorithm, the so-called gray scale, such as black-and-white TV, is that pixels are expressed in only one dimension: light or deep, so you need to process RGB three-dimensional data into one-dimensional, the simplest thing is to take the average value of RGB, but a more scientific way is to use the distribution coefficient of human eye perception of tricolor, which can improve the contrast.

So why does the above need to be calculated with a matrix? in fact, an obvious advantage of unifying into a matrix is that when you do multiple transformations, you only need to multiply the matrix to get a final matrix, similar to transform. For example, you can add sepia treatment after the grayscale:

Html {

Filter: grayscale (1) sepia

}

The brown matrix is obtained by:

If the grayscale matrix is An and the brown matrix is B, then the transformation matrix is A * B (note that the matrix generally does not satisfy the commutative law, A * B is not equal to B * A). If we do the brown treatment first and then do the gray scale, the final effect is gray scale.

We found that engines such as Direct2D also transform in this way, but with a slightly different matrix:

Other relatively simple filters such as hue rotation (hue-rotate), inverse (invert) all use this matrix transformation, but for Gaussian blur (blur), projection (drop-shadow) and so on, you need some more complex algorithms, as can be seen in the source code, Gaussian blur is processed using Skia's SkBlurImageFilter class. Whether it is a matrix or a separate processing, they are inherited from PaintFilter.

This is the end of "CSS filter and Front-end filter example Analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.