CSS filter與前端濾鏡實例分析

本篇內容介紹了“CSS filter與前端濾鏡實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　很多網站都換成了灰色調，如淘寶百度掘金知乎等，通過實地考察，灰度的技術無一例外都使用了以下CSS，如淘寶的：

　　html {

　　-webkit-filter: grayscale(100%);

　　filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

　　}

　　第一行對非IE瀏覽器生效，第二行是對IE瀏覽器生效（emmm...似乎瀏覽器就分為兩種），本質上都是使用filter的grayscale屬性，實現灰階效果，灰階是一種常用的圖片濾鏡。打開PS可以看到多種濾鏡可選擇：

　　而通過CSS的filter能夠實現其中的一些濾鏡效果，如灰階，高斯模糊等。

　　這個時候你可能會問，網頁又不是圖片，里面可能會有很多文本，為什么也能應用圖片的濾鏡呢？實際上網頁在渲染到屏幕之前都會被柵格化成Canvas位圖再畫到屏幕上，所以filter處理的就是這張位圖。

　　通過Chromium源碼，我們可以看到相關濾鏡的實現，實際上是使用了一個圖像矩陣對原始位圖進行轉換，如下代碼所示：

　　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;

　　}

　　這個便為灰階grayscale的矩陣獲取方式，如果CSS傳的amount值為1（上面參數的便為1 - amount = 0，代碼傳參的時候使用了和1的差值），那么將得到以下矩陣：

　　這個矩陣便是用來對每個像素點進行轉換，假設某個像素點的像素值為rgba（255, 119, 50, 0.5），那么這個像素點轉換計算如下：

　　（最后的w是一個額外的變換參數，默認值為1，在灰階變換里面沒有用到，所以矩陣的最后一行都為0）

　　實際上對RGB每一個的計算為：

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

　　即使用公式：

　　這個其實就是灰階算法，所謂灰階例如黑白電視便是像素點只用一個維度表示：淺或深，所以需要把RGB三維數據處理成一維的，最簡單的便是取RGB的平均值即可，但更科學的應該是用人眼對三原色的感知程度分配系數，這樣能提高對比度。

　　那么為什么上面需要用一個矩陣計算呢，實際上統一成一個矩陣有一個顯而易見好處是做多重變換的時候，只需要對這個矩陣進行累乘得到一個最終的矩陣即可，類似于transform. 例如可以在灰階之后再加上棕褐色（sepia）的處理：

　　html {

　　filter: grayscale(1) sepia(0.5);

　　}

　　棕褐色的矩陣獲取方式為：

　　如果灰階的矩陣為A，棕褐色矩陣為B，那么此次的變換矩陣便為A * B（注意矩陣一般不滿足交換律，A * B不等于B *A），如果我們先做棕褐色處理再做灰階的話，最后的效果就是灰階的。

　　我們發現Direct2D等引擎也是使用的這種方式進行變換，只不過采用的矩陣會有點差異：

　　其它相對簡單的濾鏡如色調旋轉（hue-rotate），反相（invert）等都是采用的這種矩陣變換，但是對于高斯模糊（blur）、投影（drop-shadow）等則是需要一些更復雜的算法，在源碼里可以看到，高斯模糊是使用Skia的SkBlurImageFilter類做的處理。不管是矩陣還是單獨的處理，它們都是繼承于PaintFilter.

“CSS filter與前端濾鏡實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！