Sie können CSS auch verwenden, um Bilder zu verarbeiten und in einen „Pixelstil' umzuwandeln!

Wie verwandle ich Bilder in einen „Pseudo-Pixel-Stil“? In diesem Artikel erfahren Sie, wie Sie Bilder mit CSS verarbeiten und in den „Pixelstil“ konvertieren.

Was ist Pixelstil?

Pixelstil ist eine Art Verwendung von einfarbigen Pixelquadraten fester Größe als Grundeinheit für die Erstellung, einschließlich, aber nicht beschränkt auf Malerei , Ein Kunststil in verschiedenen Bereichen wie Architektur, Spiele und mehr.
Am bekanntesten ist natürlich die Pixelgrafik früher Videospiele~像素风是一种以固定大小纯色像素方块作为基本单元，进行创作，包含但不限于绘画、建筑、游戏更各个领域的一种美术风格。
其中最让人耳熟能详的，当然是早期电子游戏的像素画面啦~

[早期红白机上"马里奥"的像素形象]

当然，早期电子游戏采用像素风，实际上是一种历史的无奈，硬件条件的限制，让游戏开发者不得不选择这种变现力强，性能开销低的美术风格。

不过，时至今日像素风在各个领域依然潮流，则被赋予了更多审美和复古上的意义。

思路分析

先看看本次要处理的“爱心图”的原图：

[爱心图]

要将一张这样的图片变成像素，我脑海里首先蹦出了第一个思路：

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

使用canvas将图片切割成N*N块，然后每块区域单独计算取色彩中值，并将其填充为实色，没错，这个思路无疑是可以很快且灵活的解决问题的。
但这样一来，没使用到CSS，同事阿洋的第一次约会岂不是就完全泡汤了？
❌❌
不行不行！我得换个思路，用CSS来实现！（推荐学习：css视频教程）

思路二：大半径高斯模糊滤镜来取中值

主体思路如下：

• 将图片分成N个div，每个div都持有图片的一部分。

• 每个div都通过css-filter来进行一次blur(高斯模糊)，视觉上达到取中值并填充div的效果。

按这个思路，其实只有一个难点，如何让每个div都持有图片的一部分？

呵，这可难不倒我那颗帮助同事大心脏。

实施

其实不难：

• 首先，我们用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(&#39;.mask-group&#39;)
    for(let i = 0; i< 64; i++) {
      const itemEl = document.createElement(&#39;div&#39;)
      itemEl.className = &#39;mask-item&#39;
      el.appendChild(itemEl)
    }
  }
</script>

• 然后我们给每个.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以外的区域！！

4. mask-image 限定可视区域

没办法，为了限定高斯模糊的效果区域，我只能通过mask-image了。
先弄一张16*16像素的纯黑all-black.png文件。
代码如下：

.mask-item {
  /* 以下为新增 */
  -webkit-mask-image: url('./all-black.png');
  mask-image: url('./all-black.png');  
}

效果图：

嘿嘿，现在就像那么回事了，不过因为被高斯

5. [Das Pixelbild von „Mario“ auf dem frühen Famicom]

Natürlich verwendeten frühe Videospiele Der Pixelstil ist eigentlich eine historische Hilflosigkeit. Die Einschränkungen der Hardwarebedingungen zwingen Spieleentwickler dazu, diesen Stil mit hoher Liquidität und Leistungsaufwand zu wählen.

Dennoch heute ist der Pixelstil in verschiedenen Bereichen immer noch beliebt und ihm wurden mehr ästhetische und Retro-Bedeutungen verliehen. 🎜

Ideenanalyse🎜🎜Schauen Sie sich zunächst das Originalbild des „Liebesbildes“ an, das dieses Mal verarbeitet werden soll: 🎜

< img src ="https://img.php.cn/upload/image/128/187/946/164791698029272Sie können CSS auch verwenden, um Bilder zu verarbeiten und in einen „Pixelstil umzuwandeln!" title="164791698029272Sie können CSS auch verwenden, um Bilder zu verarbeiten und in einen „Pixelstil umzuwandeln!" alt="Sie können CSS auch verwenden, um Bilder zu verarbeiten und in einen „Pixelstil umzuwandeln!"/>
[Liebe Bild] 🎜🎜Um ein solches Bild in Pixel umzuwandeln, kam mir die erste Idee in den Sinn: 🎜

Idee 1: Leinwand ausschneiden und ausfüllen

🎜Leinwand zum Ausschneiden verwenden Teilen Sie das Bild in N * N-Blöcke auf, berechnen Sie dann die mittlere Farbe jedes Bereichs separat und füllen Sie ihn mit einer Volltonfarbe. Ja, diese Idee kann das Problem zweifellos schnell und flexibel lösen.
Aber wäre in diesem Fall das erste Date meines Kollegen Ayang ohne die Verwendung von CSS nicht völlig ruiniert?
❌❌
Nein, nein! Ich muss meine Meinung ändern und CSS verwenden, um es zu implementieren! (Empfohlenes Lernen: CSS-Video-Tutorial) 🎜

Idee 2: Gaußscher Unschärfefilter mit großem Radius, um den Mittelwert zu erhalten

🎜Die Hauptidee ist wie folgt: 🎜

🎜🎜Teilen Sie das Bild In N Divs unterteilt, enthält jedes Div einen Teil des Bildes. 🎜🎜🎜🎜Jedes Div wird durch einen CSS-Filter verwischt (Gaußsche Unschärfe), wodurch visuell der Effekt erzielt wird, dass der Medianwert genommen und das Div gefüllt wird. 🎜🎜

🎜Nach dieser Idee gibt es eigentlich nur eine Schwierigkeit: Wie kann man dafür sorgen, dass jedes Div einen Teil des Bildes enthält? 🎜🎜Oh, das ist kein Problem für mich, der ich ein großes Herz dafür habe, meinen Kollegen zu helfen. 🎜

Es ist nicht schwer zu implementieren 🎜🎜: 🎜

🎜🎜Zuerst verwenden wir 8*8, um a zu dividieren div into 64 Es besteht kein Zweifel am Rasterlayout. 🎜🎜

🎜🎜🎜Code: 🎜

.mask-item {
  /* 以下为更改 */
  filter: blur(8px) contrast(400%) saturate(400%);
}

🎜🎜Dann legen wir einen herzförmigen Hintergrund für jedes .mask-item-Element fest🎜🎜

🎜Dann der Effekt ist Es wird so, weil der Hintergrund jedes Bildes in der oberen linken Ecke beginnt, sodass es definitiv nicht den Erwartungen entspricht. 🎜🎜🎜🎜Verbinden Als nächstes müssen wir diesen Satz in die js-Durchquerung einfügen: 🎜rrreee🎜Die Funktion dieser Codezeile besteht darin, jedem .mask-item-Element einen background-position-Stil zuzuweisen und alle zu berechnen Die obere linke Ecke des Hintergrundbilds des .mask-item-Elements überlappt einen Koordinatenpunkt. 🎜🎜Der Effekt ist wie im Bild dargestellt: 🎜🎜🎜🎜3. Intervall und Gaußsche Unschärfe hinzufügen Gemäß der Idee müssen wir nur den Abstand zu div hinzufügen und dann Gaußsche Unschärfe hinzufügen, um den Effekt zu erzielen. Der Code lautet also wie folgt: 🎜rrreee🎜Aber der Effekt ist: 🎜🎜🎜🎜Was genau ist schief gelaufen?
Gaußsche Unschärfe wirkt sich tatsächlich auf Bereiche außerhalb der inneren Box aus! ! 🎜

🎜mask-image begrenzt den sichtbaren Bereich🎜🎜🎜Auf keinen Fall, um den Bereich des Gaußschen Unschärfeeffekts einzuschränken, kann ich nur mask-image verwenden.
Erstellen Sie zunächst eine 16*16 Pixel große reinschwarze All-Black.png-Datei.
Der Code lautet wie folgt: 🎜rrreee🎜Rendering: 🎜🎜🎜🎜Hey, jetzt ist es so, aber wegen der Gaußschen Funktion ist die Farbe viel heller. Es ist in Ordnung, passen Sie es einfach an. 🎜🎜🎜Passen Sie die Farbe an🎜🎜🎜Der Code lautet wie folgt:🎜

.mask-item {
  /* 以下为更改 */
  filter: blur(8px) contrast(400%) saturate(400%);
}



大功告成！！

故事结局

万万没想到，同事阿洋还是没能完成和产品妹妹小美的约会。
原因居然是：
产品妹妹觉得我写代码的样子过于靓仔，非要和我约会!



--全剧终--

（学习视频分享：web前端）

Das obige ist der detaillierte Inhalt vonSie können CSS auch verwenden, um Bilder zu verarbeiten und in einen „Pixelstil' umzuwandeln!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!