Perbandingan Imej

Muatkan dua imej dan bandingkannya dengan penggelongsor seret atau paparan sebelah-menyebelah. Sesuai untuk suntingan sebelum/selepas. Tiada muat naik.

Cara Penggelongsor perbandingan imej berfungsi

Image Comparison Slider membolehkan anda memuatkan dua imej sebelah menyebelah dan menyeret pemisah menegak untuk mendedahkan lebih banyak satu imej dan lebih sedikit yang lain. Susun atur sebelum-dan-selepas ini adalah cara langsung dan mudah untuk menunjukkan perbezaan antara dua versi imej. Kedua-dua imej dimuatkan dari cakera setempat anda menggunakan File API dan dirender pada skrin oleh pelayar; tiada yang dimuat naik ke pelayan.

Gelangsar menggunakan pendekatan clip-path CSS supaya peralihan antara dua imej sentiasa sejajar piksel dan tiada percampuran atau interpolasi di sempadan. Anda juga boleh bertukar ke paparan skrin-belah yang menunjukkan kedua-dua imej dalam panel kiri dan kanan tetap. Alat ini berguna untuk membandingkan penyuntingan foto, hasil pemampatan, lelaran reka bentuk atau mana-mana dua imej di mana anda perlu melihat perbezaan dengan jelas.

Ditulis oleh Bastien Sulyan

Cara menggunakan Penggelongsor perbandingan imej, langkah demi langkah

Lepaskan imej pertama (versi 'sebelum') ke kawasan muat naik kiri.
Lepaskan imej kedua (versi 'selepas') ke kawasan muat naik kanan.
Seret pemisah ke kiri dan kanan untuk mendedahkan lebih banyak satu imej pada satu masa.
Tukar ke paparan belah untuk melihat kedua-dua imej dalam panel tetap jika anda lebih suka perbandingan statik.
Gunakan butang skrin penuh untuk memaksimumkan perbandingan untuk pemeriksaan terperinci.

Kes penggunaan biasa

Jurugambar membandingkan eksport RAW asal dengan versi yang telah diubah suai untuk menilai berapa banyak suntingan mengubah imej.
Pembangun menyemak pasangan imej yang dimampatkan sebelum-dan-selepas untuk menilai sama ada kehilangan kualiti pada tahap pemampatan tertentu boleh diterima.
Pereka UX membentangkan reka bentuk semula UI dengan meletakkan tangkapan skrin antara muka lama di kiri dan yang baru di kanan untuk semakan pihak berkepentingan.
Penyunting kandungan mengesahkan bahawa manipulasi imej (penggredan warna, pemangkasan) adalah konsisten antara lakaran kecil dan versi saiz penuh.

Soalan lazim

Adakah kedua-dua imej perlu bersaiz sama?

Alat ini berfungsi terbaik apabila kedua-dua imej mempunyai dimensi yang sama, kerana gelangsar menindihnya dengan tepat. Jika imej berbeza dalam saiz, alat menskalakan keduanya ke saiz paparan biasa. Beberapa ketidakselarasan mungkin muncul di tepi jika nisbah aspek berbeza.

Adakah imej dihantar ke mana-mana untuk perbandingan berfungsi?

Tidak. Kedua-dua imej dimuatkan dari sistem fail anda melalui File API dan dilukis ke dalam elemen Canvas dalam pelayar anda. Perbandingan adalah operasi pemaparan sisi klien. Tiada imej yang meninggalkan peranti anda.

Bolehkah saya membandingkan imej dari dua URL berbeza dan bukannya fail setempat?

Alat semasa hanya menerima fail setempat. Memuatkan imej dari URL jauh memerlukan pelayar untuk mengambilnya dan tertakluk kepada sekatan CORS yang tidak dibenarkan oleh banyak hos imej.

Adakah terdapat saiz imej maksimum yang boleh dikendalikan oleh perbandingan?

Hadnya ialah memori Canvas pelayar anda. Imej sehingga sekitar 20 megapiksel setiap satu dikendalikan tanpa masalah pada kebanyakan peranti desktop. Imej yang sangat besar mungkin melambatkan pemaparan atau menyebabkan ralat memori pada perkakasan berkeupayaan rendah.

Bolehkah saya menyimpan tangkapan skrin kedudukan gelangsar tertentu?

Alat tangkapan skrin sistem pengendalian anda (atau ciri tangkapan skrin pelayar dalam DevTools) adalah cara yang mudah untuk menangkap kedudukan gelangsar tertentu. Paparan perbandingan itu sendiri tidak mempunyai butang eksport terbina dalam untuk imej yang digabungkan.

Alat berkaitan

Kekalkan semuanya setempat, terokai alat pelengkap.

Semua alat imej