產(chǎn)品小妹妹對同事阿洋說：“如果你能用CSS把一張愛心圖片變成像素風，我今天就答應跟你約會?！?/p>

我拍了拍阿洋的肩膀，意味深長地說：“放心，學長會幫你的?！?/p>

什么是像素風？

像素風是一種以固定大小純色像素方塊作為基本單元，進行創(chuàng)作，包含但不限于繪畫、建筑、游戲更各個領(lǐng)域的一種美術(shù)風格。
其中最讓人耳熟能詳?shù)模斎皇窃缙?code style="font-size: 14px;border-radius: 4px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(155, 110, 35);background-color: rgb(255, 245, 227);padding: 3px;margin: 3px;">電子游戲的像素畫面啦~

[早期紅白機上"馬里奧"的像素形象]
當然，早期電子游戲采用像素風，實際上是一種歷史的無奈，硬件條件的限制，讓游戲開發(fā)者不得不選擇這種變現(xiàn)力強，性能開銷低的美術(shù)風格。

不過，時至今日像素風在各個領(lǐng)域依然潮流，則被賦予了更多審美和復古上的意義。

思路分析

先看看本次要處理的“愛心圖”的原圖：

[愛心圖]

要將一張這樣的圖片變成像素，我腦海里首先蹦出了第一個思路：

思路一：通過canvas切割和填充

使用canvas將圖片切割成N*N塊，然后每塊區(qū)域單獨計算取色彩中值，并將其填充為實色，沒錯，這個思路無疑是可以很快且靈活的解決問題的。
但這樣一來，沒使用到CSS，同事阿洋的第一次約會豈不是就完全泡湯了？
??
不行不行！我得換個思路，用CSS來實現(xiàn)！

思路二：大半徑高斯模糊濾鏡來取中值

主體思路如下：

1. 將圖片分成N個div，每個div都持有圖片的一部分。
2. 每個div都通過css-filter來進行一次blur(高斯模糊)，視覺上達到取中值并填充div的效果。

按這個思路，其實只有一個難點，如何讓每個div都持有圖片的一部分？

呵，這可難不倒我那顆幫助同事大心臟。

實施

其實不難：

1. 首先，我們用8*8將一個div分成64份，毫無疑問的grid布局。

代碼：

<style>
????.mask-group?{
??????width:?128px;
??????height:?128px;
??????display:?grid;
??????grid-template-columns:?repeat(8,1fr);
??????grid-template-rows:?repeat(8,1fr);
????}
style>
<script>
??const?el?=?document.querySelector('.mask-group')
????for(let?i?=?0;?i64;?i++)?{
??????const?itemEl?=?document.createElement('div')
??????itemEl.className?=?'mask-item'
??????el.appendChild(itemEl)
????}
??}
script>
復制代碼

2. 然后我們給每個.mask-item 元素設置一個心形背景

然后效果就變成了這樣，因為每一張的背景都是從左上角開始的，因此肯定不符合預期。

接下來：我們需要在js的遍歷中插入這么一句：

itemEl.style.backgroundPosition?=?`-${Math.floor(i%8)?*?16}px?-${Math.floor(i/8)?*?16}px?`
復制代碼

這行代碼的作用，是給每一個.mask-item元素單獨賦予一個background-position樣式，通過計算讓所有.mask-item元素的背景圖的左上角都重疊到了一個坐標點上。
效果如圖：

3. 增加間隔和高斯模糊 按照設想，我們只需要給div加上間隔，再給上高斯模糊，就能達到效果了。于是代碼如下：

.mask-group?{
??/*?以下為新增?*/
??grid-row-gap:?2px;
??grid-column-gap:?2px;
}
.mask-item?{
??/*?以下為新增?*/
??filter:?blur(8px)
}
復制代碼

但是效果卻：

到底是哪里出了問題？
高斯模糊居然會作用到inner-box以外的區(qū)域?。?/p>

4. mask-image 限定可視區(qū)域

沒辦法，為了限定高斯模糊的效果區(qū)域，我只能通過mask-image了。
先弄一張16*16像素的純黑all-black.png文件。
代碼如下：

.mask-item?{
??/*?以下為新增?*/
??-webkit-mask-image:?url('./all-black.png');
??mask-image:?url('./all-black.png');??
}
復制代碼

效果圖：

嘿嘿，現(xiàn)在就像那么回事了，不過因為被高斯的原因，顏色淡了不少，沒事，微調(diào)一下即可。

5. 調(diào)整顏色

代碼如下：

.mask-item?{
??/*?以下為更改?*/
??filter:?blur(8px)?contrast(400%)?saturate(400%);
}
復制代碼

大功告成?。?/strong>

故事結(jié)局

萬萬沒想到，同事阿洋還是沒能完成和產(chǎn)品妹妹小美的約會。
原因居然是：
產(chǎn)品妹妹覺得我寫代碼的樣子過于靚仔，非要和我約會!

--全劇終--

回復“加群”與大佬們一起交流學習~

點擊“閱讀原文”查看 130+ 篇原創(chuàng)文章