Bagaimana untuk menggunakan SVG untuk mencapai kesan mozek imej tanpa menggunakan Javascript? Artikel berikut akan memberi anda pemahaman terperinci, saya harap ia akan membantu anda!

Saya memajukan artikel oleh rakan saya Vajoy pada akaun awam sebelum ini - Bijak menggunakan CSS untuk menggayakan mozek imej .

Intinya ialah menggunakan sifat yang menarik dalam CSS - penyebaran imej, yang boleh digunakan untuk menetapkan algoritma penskalaan imej. [Pembelajaran yang disyorkan: tutorial video css]

Apakah pemaparan imej?

Pemarahan imej sifat CSS digunakan untuk menetapkan algoritma penskalaan imej. Ia terpakai pada elemen itu sendiri, pada imej dalam atribut elemen lain, dan pada elemen kanak-kanak.

Sintaksnya agak mudah:

{
????image-rendering:?auto;??????????????//?默認(rèn)值，使用雙線性（bilinear）算法進(jìn)行重新采樣（高質(zhì)量）
????image-rendering:?smooth;?????????//?使用能最大化圖像客觀觀感的算法來縮放圖像。讓照片更“平滑”
????image-rendering:?crisp-edges;??//?使用可有效保留對比度和圖像中的邊緣的算法來對圖像進(jìn)行縮放
????image-rendering:?pixelated;??????//?放大圖像時(shí),?使用最近鄰居算法，因此，圖像看著像是由大塊像素組成的
}

Antaranya, image-rendering: pixelated lebih menarik dan boleh memozek imej berketepatan rendah.

Sebagai contoh, katakan kita mempunyai imej 300px x 300px, dan kita menukarnya menjadi 30px x 30px:

Kami kemudian menukar imej yang herot, Zum masuk ke 300px x 300px:

Atas dasar ini, kami menetapkan image-rendering: pixelated pada imej ini untuk mendapatkan imej mozek:

<img src="pic.jpeg?30x30" />

img?{
????width:?300px;
????height:?300px;
????image-rendering:?pixelated
}

<strong>image-rendering: pixelated</strong>pemarahan imej: piksel Had untuk mencapai kesan mozek

image-rendering: pixelatedOK, jadi kenapa adakah anda perlu zum keluar dahulu, kemudian zum masuk, dan kemudian gunakan image-rendering: pixelated? Mari buat perbandingan dan tetapkan

image-rendering: pixelatedTetapkan

image-rendering: pixelatedIni juga selaras dengan perihalan Apabila mengezum masuk pada imej, ia menggunakan algoritma jiran terdekat, jadi imej itu kelihatan seperti ia terdiri daripada blok besar piksel .

Kami hanya boleh menggunakan image-rendering: pixelated untuk mendapatkan gambar mozek berdasarkan imej yang dibesarkan dan kabur!

Gunakan CSS untuk mengurangkan dan kemudian membesarkan imej?

Jadi, andaikan kita hanya mempunyai imej asal yang jelas dan ingin menggunakan CSS untuk mendapatkan kesan mozek. Adakah ia boleh dilaksanakan? Mengikuti idea ini, kita boleh berfikir: Bolehkah

menggunakan CSS untuk mengurangkan dan kemudian membesarkan imej, dan kemudian menggunakan image-rendering: pixelated?

Tidak. Gambar di WEB sangat mirip dengan objek pintar dalam Photoshop - anda boleh mengubah suai saiznya sesuka hati (contohnya, membesarkannya berkali-kali untuk menjadikannya kabur), tetapi apabila anda akhirnya menukar gambar itu kembali kepada saiz asalnya, gambar itu akan kembali kepada saiz asalnya (tanpa sebarang herotan) .

Jadi, jika anda ingin mendapatkan imej kabur apabila hanya ada satu imej asal, anda perlu beralih kepada Kanvas, yang menyusahkan sedikit. Kami hanya mahukan kesan mozek.

Tindanan penapis SVG untuk mencapai kesan mozek

Ini membawa kita kepada protagonis hari ini, penapis SVG, menggunakan beberapa lapisan penapis SVG Dengan menindih, anda sebenarnya boleh mencapai penapis kesan mozek dengan sangat mudah.

Dan, penapis SVG boleh diperkenalkan dengan mudah melalui penapis CSS.

Kod ini sebenarnya sangat mudah SVG mentakrifkan penapis dan menggunakan kesan superimposisi berbilang lapisan penapis untuk mencapai kesan mozek Kemudian, ia diperkenalkan melalui penapis CSS dan boleh digunakan pada mana-mana elemen:

<img src="任意無需縮放的原圖.png" alt="">
<svg>
??<filter id="pixelate" x="0" y="0">
????<feFlood x="4" y="4" height="2" width="2"/>
????<feComposite width="8" height="8"/>
????<feTile result="a"/>
????<feComposite in="SourceGraphic" in2="a" operator="in"/>
????<feMorphology operator="dilate"radius="5"/>
??</filter>
</svg>

img?{
????width:?300px;
????height:?300px;
????filter:?url(#pixelate);
}

Dengan cara ini, kami mendapat kesan mozek:

Jika anda hanya mahu menggunakan kesan ini, anda tidak perlu memahami keseluruhan SVG <filter> Apa sebenarnya yang anda lakukan Sudah tentu, jika anda seorang yang bertanya soalan hingga akhir, anda perlu mempunyai asas SVG tertentu Anda disyorkan untuk membaca pengenalan ini tentang SVG penapis saya:

• Menarik! Penapis SVG yang berkuasa
• Menarik! Skim penjanaan sempadan tidak teratur
• Mengejutkan! Bolehkah anda menggunakan penapis SVG untuk mencipta emotikon?

Batasan CSS/SVG untuk melaksanakan mozek

Sudah tentu, had penapis CSS/SVG untuk melaksanakan mozek ialah jika anda tidak 't want to Jika pengguna boleh melihat imej asal, maka menggunakan kaedah ini secara langsung pada klien adalah bersamaan dengan terus mendedahkan imej asal.

Oleh kerana kaedah penapis CSS/SVG adalah untuk memozek imej di bahagian hadapan, dan imej asal diperlukan.

Sudah tentu, menggunakan dua teknik mozek imej yang dinyatakan di atas, kami masih boleh menggunakannya untuk mencipta beberapa kesan interaktif yang mudah, seperti ini:

Anda boleh menemui semua kod untuk penapis DEMO dan SVG di atas dalam dua DEMO ini:

• Demo CodePen - aplikasi piksel pemaparan imej
• SVG Penapis Piksel

Alamat asal: https://www.cnblogs.com/coco1s/p/16134088.html

Pengarang: ChokCoco

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan SVG untuk mencapai kesan mozek imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!