Bagaimana untuk Melumpuhkan Antialiasing Apabila Menskala Imej?

Lumpuhkan Antialiasing Semasa Menskala Imej

Latar Belakang

Apabila menskalakan imej, antialiasing sering digunakan untuk mencipta peralihan yang lancar antara piksel, mengurangkan tepi bergerigi . Walau bagaimanapun, dalam kes tertentu, adalah wajar untuk mengekalkan tepi keras, terutamanya apabila berurusan dengan seni piksel atau grafik tersekat.

Penyelesaian CSS

Secara tradisinya, CSS tidak mempunyai bendera khusus untuk melumpuhkan antialiasing. Walau bagaimanapun, beberapa sifat khusus vendor boleh menyediakan kefungsian ini:

• pemarahan imej: -moz-crisp-edges; (Firefox)
• penyebaran imej: -o-crisp-edges; (Opera)
• penyebaran imej: -webkit-optimum-kontras; (Chrome dan Safari)
• -ms-interpolation-mod: nearest-jiran; (IE8 )

Sifat ini, apabila digunakan pada imej, mengutamakan tepi tajam dan mengurangkan kesan antialiasing.

Pelaksanaan

Untuk melumpuhkan antialiasing untuk semua imej latar belakang dalam helaian gaya CSS, gunakan kod berikut:

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

Bukan CSS Penyelesaian

Walaupun CSS menawarkan penyelesaian yang paling mudah, ia mungkin tidak selalu berfungsi pada imej latar belakang. Dalam kes sedemikian, kaedah alternatif seperti JavaScript atau alat penyuntingan imej boleh dipertimbangkan:

• HTMLCanvasElement: Gunakan kaedah drawImage() dengan parameter imageSmoothingEnabled ditetapkan kepada palsu.
• ImageMagick: Gunakan pilihan -penapis Nearest Neighbor pada imej.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Antialiasing Apabila Menskala Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!