Anda juga boleh menggunakan CSS untuk memproses imej dan mengubahnya menjadi "gaya piksel"!

Bagaimana untuk menukar gambar menjadi "gaya pseudo-piksel"? Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS untuk memproses imej dan menukarnya kepada "gaya piksel".

Apakah gaya piksel?

像素风 ialah gaya seni yang 以固定大小纯色像素方块 digunakan sebagai unit asas untuk penciptaan, termasuk tetapi tidak terhad kepada 绘画, 建筑, 游戏 dan bidang lain.
Yang paling biasa ialah imej piksel awal 电子游戏~

[Imej piksel "Mario" pada konsol merah dan putih awal]

Sudah tentu, penggunaan 像素风 dalam permainan video awal sebenarnya adalah ketidakberdayaan sejarah Keterbatasan keadaan perkakasan memaksa pembangun permainan untuk memilih 变现力强, 性能开销 gaya seni rendah ini.

Walau bagaimanapun, 时至今日 gaya piksel masih popular dalam pelbagai bidang, dan ia telah diberi lebih banyak makna bagi 审美 dan 复古.

Analisis Idea

Jom lihat gambar asal “Gambar Cinta” yang akan diproses kali ini:

[Gambar Cinta]

Untuk menukar gambar sedemikian kepada piksel, idea pertama muncul dalam fikiran saya:

Idea 1: Potong dan isi melalui kanvas

Gunakan kanvas untuk memotong gambar menjadi N *N blok, dan kemudian mengira nilai median warna setiap kawasan secara berasingan dan mengisinya dengan warna pepejal Ya, idea ini sudah pasti boleh menyelesaikan masalah dengan cepat dan fleksibel.
Tetapi dalam kes ini, tanpa menggunakan CSS, bukankah rakan sekerja saya Ayang 第一次约会 akan musnah sepenuhnya?
❌❌
Tidak, tidak! Saya perlu mengubah fikiran saya dan menggunakan CSS untuk melaksanakannya! (Pembelajaran yang disyorkan: tutorial video css)

Idea 2: Gunakan penapis kabur Gaussian radius yang besar untuk mendapatkan nilai median

Idea utama adalah seperti berikut:

• Bahagikan imej kepada N div, setiap div memegang sebahagian daripada imej.

• Setiap div disalurkan melalui penapis css sekali blur(高斯模糊) untuk mencapai kesan visual 取中值并填充div.

Mengikut idea ini, sebenarnya hanya ada satu kesukaran, bagaimana untuk 让每个div都持有图片的一部分？

Oh, ini bukan masalah bagi saya 那颗帮助同事大心脏.

Melaksanakan

sebenarnya tidak sukar:

• Pertama, kami membahagikan div kepada 64 bahagian menggunakan 8*8, yang sudah pasti susun atur grid .

Kod:

<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>

• Kemudian kami tetapkan elemen .mask-item untuk setiap Jantung -latar belakang berbentuk

Kemudian kesannya adalah 变成了这样, kerana latar belakang setiap gambar bermula dari sudut kiri atas, jadi pastinya tidak menepati jangkaan.

Seterusnya: Kita perlu memasukkan ayat ini dalam js traversal:

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

Fungsi baris kod ini adalah untuk memberikan setiap .mask Elemen -item diberikan gaya background-position secara individu dan penjuru kiri sebelah atas imej latar belakang semua elemen .mask-item dikira untuk bertindih dengan 坐标点上.

Kesannya adalah seperti yang ditunjukkan di bawah:

3 Mengikut idea, kita hanya perlu menambah 加上间隔 pada div dan kemudian menambah 高斯模糊 untuk mencapai kesannya. Jadi kodnya adalah seperti berikut:

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

Tetapi kesannya ialah:

Apakah masalahnya?
高斯模糊 sebenarnya menjejaskan kawasan selain inner-box! !

4. imej topeng mengehadkan kawasan yang boleh dilihat

Tidak semestinya, untuk mengehadkan kawasan kesan kabur Gaussian, saya hanya boleh menggunakan imej topeng.
Mula-mula buat fail 16*16 piksel hitam tulen semua-hitam.png.
Kodnya adalah seperti berikut:

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

Rendering:

Hei, macam tu sekarang, tapi atas alasan 因为被高斯 , Warna sudah agak pudar, tidak mengapa, perbaiki sahaja.

5. Laraskan warna

Kodnya adalah seperti berikut:

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

大功告成！！

故事结局

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

--全剧终--

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

Atas ialah kandungan terperinci Anda juga boleh menggunakan CSS untuk memproses imej dan mengubahnya menjadi "gaya piksel"!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!