JavaScript API untuk Membandingkan Gambar PNG
Pustaka JavaScript Sumber Terbuka yang mendukung perbandingan gambar PNG di dalam Aplikasi JavaScript. Ini mendukung membandingkan gambar PNG dengan Mengabaikan antialiasing & dengan mengabaikan tanda sisipan.
Membandingkan gambar dengan gambar menggunakan JavaScript bisa sangat sulit dan menantang. Memilih alat yang salah juga dapat sangat memengaruhi kinerja. LooksSame adalah pustaka JavaScript open source yang telah menyertakan fungsionalitas untuk membandingkan gambar PNG di dalam aplikasi JavaScript dan akan bekerja di luar kotak di setiap mesin. Perpustakaan telah dibuat dengan mempertimbangkan persepsi warna manusia. Perpustakaan ini terutama dibuat untuk kebutuhan pengujian regresi visual untuk utilitas Gemini.
Pustaka ini memungkinkan pengembang dengan cepat dan mudah membandingkan perbedaan antara dua gambar PNG dengan mudah menggunakan perintah JavaScript. Ini telah memberikan dukungan untuk memproses gambar PNG baik dengan menyediakan jalur ke file atau gambar di dalam buffer. Menggunakan pengaturan default hanya akan mengidentifikasi perbedaan yang nyata dan jika Anda perlu mendeteksi perbedaan tertentu, pilih opsi ketat.
Pustaka telah memberikan dukungan untuk beberapa fitur penting yang terkait dengan perbandingan gambar seperti membandingkan gambar dengan mengabaikan tanda sisipan, membandingkan gambar dengan mengabaikan antialiasing, mendapatkan batas diff, mendapatkan cluster diff, membangun gambar diff, membangun gambar diff sebagai buffer, membandingkan warna, dan masih banyak lagi.
Memulai dengan Terlihat Sama
Cara yang disarankan untuk menginstal LooksSameis melalui NPM. Silakan gunakan perintah berikut untuk menginstalnya.
Install LooksSame via NPM
Instal Tampak Sama melalui NPM
npm install looks-same Bandingkan Gambar PNG di dalam Aplikasi JavaScript
Pustaka LooksSame memberi pemrogram perangkat lunak kemampuan untuk membandingkan gambar PNG mereka secara terprogram menggunakan Node.js. Anda perlu memberikan jalur yang benar ke gambar PNG atau buffer sebagai parameter. Salah satu contoh sederhana perbandingan gambar dapat mengambil tangkapan layar elemen DOM dengan gambar dan menggunakan perpustakaan untuk membandingkannya dengan gambar lokal. Anda juga dapat menggunakan RequestLogger untuk mencatat permintaan gambar dan membandingkan isi respons dengan file lokal menggunakan metode Buffer.compare().
Bandingkan Gambar PNG dengan Mengabaikan Antialiasing
Setiap gambar terdiri dari piksel dan sambil membandingkan gambar-gambar ini, Anda membandingkan setiap warna piksel dalam gambar satu dengan warna piksel di lokasi gambar yang sesuai. Jadi jika, beberapa piksel berbeda, maka Anda dapat mengetahui bahwa gambar tidak cocok. Biasanya, aliasing terjadi ketika resolusi gambar sangat rendah agar prosesor dapat membuat garis halus dengan benar. Teknik anti-aliasing diterapkan untuk memberikan tampilan yang lebih halus dan dengan demikian Anda mendapatkan hasil perbandingan yang berbeda per lingkungan. Beberapa gambar memiliki perbedaan saat membandingkannya karena antialiasing. Pustaka LooksSame menangani masalah anti-aliasing dengan mengabaikan piksel tertentu di mana anti-aliasing mungkin terjadi. Perbedaan ini akan diabaikan secara default.
Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The anti alias technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with anti alias issues by ignoring certain of the pixels where anti alias is likely to have occurred. These differences will be ignored by default.
Perbandingan Gambar dengan Mengabaikan Caret
Pustaka LooksSame gratis telah menyediakan fungsionalitas untuk mengabaikan tanda sisipan pada kotak input sambil membandingkan dua gambar di dalam aplikasi mereka sendiri. Tanda sisipan teks di elemen input teks menyusahkan tugas regresi visual karena selalu berkedip. Terkadang ketika membandingkan dua kotak teks atau gambar kotak input, karena gambar memberi tanda sisipan, perbandingannya gagal untuk perbedaan piksel. Jadi, Anda dapat mengabaikan opsi tanda sisipan untuk menonaktifkan mengabaikan perbedaan tersebut.
