web前端入門到實(shí)戰(zhàn)：CSS filter與前端濾鏡

1、web前端入門到實(shí)戰(zhàn)：css filter與前端濾鏡無數(shù)網(wǎng)站都換成了灰色調(diào)，如淘寶百度掘金知乎等，通過實(shí)地考察，灰度的技術(shù)無一例外都用法了以下css，如淘寶的：html -webkit-filter: grayscale(100%);filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);第一行對非ie掃瞄器生效，其次行是對ie掃瞄器生效（emmm.似乎掃瞄器就分為兩種），本質(zhì)上都是用法filter的grayscale屬性，實(shí)現(xiàn)灰階效果，灰階是一種常用的濾鏡。打開ps可以看到多種濾鏡可挑選：而通過css的filter能

2、夠?qū)崿F(xiàn)其中的一些濾鏡效果，如灰階，高斯含糊等。這個時候你可能會問，網(wǎng)頁又不是，里面可能會有無數(shù)文本，為什么也能應(yīng)用的濾鏡呢？事實(shí)上網(wǎng)頁在渲染到屏幕之前都會被柵格化成canvas位圖再畫到屏幕上，所以filter處理的就是這張位圖。通過chromium源碼，我們可以看到相關(guān)濾鏡的實(shí)現(xiàn)，事實(shí)上是用法了一個圖像矩陣對原始位圖舉行轉(zhuǎn)換，如下代碼所示：void getgrayscalematrix(float amount, float matrix20) / note, these values are computed to ensure matrixneedsclamping is false/

3、for amount in 0.1matrix0 = 0.2126f + 0.7874f * amount;matrix1 = 0.7152f - 0.7152f * amount;matrix2 = 1.f - (matrix0 + matrix1);matrix3 = matrix4 = 0.f;matrix5 = 0.2126f - 0.2126f * amount;matrix6 = 0.7152f + 0.2848f * amount;matrix7 = 1.f - (matrix5 + matrix6);matrix8 = matrix9 = 0.f;matrix10 = 0.21

4、26f - 0.2126f * amount;matrix11 = 0.7152f - 0.7152f * amount;matrix12 = 1.f - (matrix10 + matrix11);matrix13 = matrix14 = 0.f;matrix15 = matrix16 = matrix17 = matrix19 = 0.f;matrix18 = 1.f;這個便為灰階grayscale的矩陣獵取方式，假如css傳的amount值為1（上面參數(shù)的便為1 - amount = 0，代碼傳參的時候用法了和1的差值），那么將得到以下矩陣：這個矩陣便是用來對每個像素點(diǎn)舉行轉(zhuǎn)換，假設(shè)某

5、個像素點(diǎn)的像素值為rgba（255, 119, 50, 0.5），那么這個像素點(diǎn)轉(zhuǎn)換計(jì)算如下：（最后的w是一個額外的變換參數(shù)，默認(rèn)值為1，在灰階變換里面沒實(shí)用到，所以矩陣的最后一行都為0）事實(shí)上對rgb每一個的計(jì)算為：r/g/b = 255 * 0.2126 + 119 * 0.7152 + 50 * 0.0722 = 143即用法公式：這個其實(shí)就是灰階算法，所謂灰階例如黑白電視便是像素點(diǎn)只用一個維度表示：淺或深，所以需要把rgb三維數(shù)據(jù)處理成一維的，最容易的便是取rgb的平均值即可，但更科學(xué)的應(yīng)當(dāng)是用人眼對三原色的感知程度分配系數(shù)，這樣能提高對照度。那么為什么上面需要用一個矩陣計(jì)算呢，事實(shí)上

6、統(tǒng)一成一個矩陣有一個自不待言益處是做多重變換的時候，只需要對這個矩陣舉行累乘得到一個終于的矩陣即可，類似于transform. 例如可以在灰階之后再加上棕褐色（sepia）的處理：html filter: grayscale(1) sepia(0.5);如下圖對照：棕褐色的矩陣獵取方式為：假如灰階的矩陣為a，棕褐色矩陣為b，那么此次的變換矩陣便為a * b（注重矩陣普通不滿足交換律，a * b不等于b *a），假如我們先做棕褐色處理再做灰階的話，最后的效果就是灰階的。我們發(fā)覺direct2d等引擎也是用法的這種方式舉行變換，只不過采納的矩陣會有點(diǎn)差異：其它相對容易的濾鏡如色調(diào)旋轉(zhuǎn)（hue-rotate），反相（invert）等都是采納的這種矩陣變換，但是對于高斯含糊（blur）、投影（drop-shadow）等則是需要一些更復(fù)雜的算法，在源碼里可以看到，高斯含糊是用法skia的skblurimagefilter類做的處理。不管是矩陣還是單獨(dú)的處理，它們都是繼承于paintfilter.最后，本篇主要容易介紹了下filter濾鏡