CSS를 사용하여 이미지를 처리하고 "픽셀 스타일"로 변환할 수도 있습니다!

사진을 "의사 픽셀 스타일"로 바꾸는 방법은 무엇입니까? 이 기사에서는 CSS를 사용하여 이미지를 처리하고 "픽셀 스타일"로 변환하는 방법을 소개합니다. 도움이 되길 바랍니다.

픽셀 스타일이란 무엇인가요?

픽셀 스타일은 페인팅을 포함하되 이에 국한되지 않는 창작의 기본 단위로 일종의 고정 크기 단색 픽셀 사각형을 사용하는 것입니다. , 건축, 게임 등 다양한 분야의 예술 스타일입니다. 像素风是一种以固定大小纯色像素方块作为基本单元，进行创作，包含但不限于绘画、建筑、游戏更各个领域的一种美术风格。
其中最让人耳熟能详的，当然是早期电子游戏的像素画面啦~

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

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

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

思路分析

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

[爱心图]

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

思路一：通过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元素的背景图的左上角都重叠到了一个坐标点上가장 친숙한 것은 물론 초기 비디오 게임의 픽셀 그래픽입니다~

[초기 패미컴의 "마리오" 픽셀 이미지]

물론 초기 비디오 게임도 픽셀 스타일을 채택했습니다. , 이는 실제로 일종의 역사적 무력함입니다. 하드웨어 조건의 한계로 인해 게임 개발자는 이런 종류의 높은 유동성과 낮은 성능 오버헤드 아트 스타일을 선택해야 합니다. .

加上间隔，再给上高斯模糊그러나 오늘날 픽셀 스타일은 다양한 분야에서 여전히 인기가 있으며, 미적 및 복고풍 의미가 더 많이 부여되었습니다.

아이디어 분석

먼저 이번에 처리할 "사랑 그림"의 원본 이미지를 살펴보세요:

[사랑 사진]

그러한 그림을 픽셀로 바꾸려면 다음 아이디어가 떠올랐습니다.

아이디어 1: 캔버스를 자르고 채우기

高斯模糊居然会作用到inner-box以外的区域！！

4. mask-image 限定可视区域

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

.mask-group {
  /* 以下为新增 */
  grid-row-gap: 2px;
  grid-column-gap: 2px;
}
.mask-item {
  /* 以下为新增 */
  filter: blur(8px)
}

效果图：

嘿嘿，现在就像那么回事了，不过因为被高斯캔버스 사용 그림을 잘라서 N*N 블록을 만든 다음 각 영역의 색상 중앙값을 개별적으로 계산하고 단색으로 채웁니다. 이 아이디어는 의심할 여지 없이 문제를 빠르고 유연하게 해결할 수 있습니다.

하지만 이 경우 CSS를 사용하지 않으면 동료 아양의 첫 데이트가 완전히 망가지지 않을까요?

❌❌
5. 안돼 안돼! 마음을 바꾸고 CSS를 사용하여 구현해야 합니다! (추천 학습: css 동영상 튜토리얼)

아이디어 2: 중앙값을 얻기 위한 큰 반경의 가우스 흐림 필터

주요 아이디어는 다음과 같습니다:

🎜이미지 분할 N divs 에 각 div는 이미지의 일부를 보유합니다. 🎜🎜🎜🎜각 div는 css-filter를 통해 blur(가우시안 블러)로, 시각적으로 중앙값을 가져와 div를 채우는 효과를 얻습니다. 🎜🎜

🎜이 아이디어에 따르면 실제로는 단 하나의 어려움이 있습니다. 각 div를 이미지의 일부로 유지하려면 어떻게 해야 할까요? 🎜🎜아, 동료를 도우려는 마음이 큰 저에게는 문제가 되지 않습니다. 🎜

구현하는 것은 어렵지 않습니다 🎜🎜: 🎜

🎜🎜먼저 8*8을 사용하여 div into 64 그리드 레이아웃에 대해서는 의심의 여지가 없습니다. 🎜🎜

🎜🎜🎜Code: 🎜

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

🎜🎜그런 다음 각 .mask-item 요소에 대해 하트 모양의 배경을 설정합니다🎜🎜

🎜그런 다음 효과 이렇게 됩니다, 각 사진의 배경이 왼쪽 상단부터 시작하기 때문에 확실히 기대에 미치지 못합니다. 🎜🎜🎜🎜연결 다음: js 탐색에 이 문장을 삽입해야 합니다. 🎜

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

🎜이 코드 줄의 기능은 배경 위치 스타일을 각 .mask-item 요소에 할당하고 모든 .mask-item 요소의 배경 이미지 왼쪽 상단이 좌표점과 겹칩니다. 🎜🎜효과는 그림과 같습니다: 🎜🎜🎜🎜🎜3 간격 및 가우시안 블러를 추가합니다. 아이디어에 따르면 효과를 얻으려면 div🎜만 제공하면 됩니다. 따라서 코드는 다음과 같습니다. 🎜rrreee🎜 하지만 결과는 다음과 같습니다. 🎜🎜🎜🎜🎜문제가 무엇입니까? 🎜가우시안 블러는 실제로 내부 상자 외부 영역에 영향을 미칩니다! ! 🎜

🎜마스크 이미지는 가시 영역을 제한합니다🎜🎜🎜안됩니다. 가우시안 블러 효과 영역을 제한하려면 마스크 이미지만 사용할 수 있습니다. 🎜먼저 16*16픽셀의 퓨어블랙 올블랙.png 파일을 만듭니다. 🎜코드는 다음과 같습니다: 🎜rrreee🎜렌더링: 🎜🎜🎜🎜아 지금은 그렇긴 한데 가우시안 덕분에 색이 많이 연해지네요 괜찮습니다. 🎜🎜🎜색상을 조정하세요🎜🎜🎜코드는 다음과 같습니다🎜

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



大功告成！！

故事结局

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



--全剧终--

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

위 내용은 CSS를 사용하여 이미지를 처리하고 "픽셀 스타일"로 변환할 수도 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!