1. Produk
  2.   Imej
  3.   JavaScript
  4.   pixelmatch
 
  

API JavaScript Sumber Terbuka untuk Membandingkan Imej

Perpustakaan JavaScript membolehkan pengaturcara Perisian membandingkan dua imej dalam berbilang persekitaran seperti Node atau penyemak imbas dsb.

Kadangkala diperlukan untuk membandingkan dua imej untuk melihat kesamaan mereka. Ia adalah proses yang sangat rumit dan memerlukan pengetahuan yang baik untuk mencapainya. Pustaka pixelmatch sumber terbuka boleh menjadi pilihan yang sangat berguna untuk membandingkan dua imej dalam mana-mana persekitaran. Memandangkan perpustakaan tidak mempunyai kebergantungan dan berfungsi pada tatasusunan data imej yang ditaip mentah, jadi boleh digunakan dalam berbilang persekitaran seperti Node atau penyemak imbas, dsb.

Padanan piksel bersaiz sangat kecil dan sangat mudah digunakan tetapi merupakan perpustakaan perbandingan imej peringkat piksel yang sangat pantas. Ia ditulis dalam JavaScript dan pada mulanya dibuat untuk membandingkan tangkapan skrin dalam ujian. Pustaka menyokong ciri seperti pengesanan piksel anti-alias dan metrik perbezaan warna persepsi.

Pengesanan anti-aliasing ialah ciri yang sangat berguna kerana biasanya telah diperhatikan bahawa pemaparan data yang sama pada aplikasi, peranti atau sistem pengendalian yang berbeza boleh menjana hasil yang sedikit berbeza. Tetapi kebanyakannya adalah disyorkan untuk mengabaikan perbezaan kecil atau ujian ini untuk menangkap data yang lebih bermakna.

Previous Next

Bermula dengan pixelmatch

Cara yang disyorkan untuk memasang pixelmatch adalah melalui NPM. Sila gunakan arahan berikut untuk memasangnya.

Pasang pixelmatch melalui NPM

 npm install pixelmatch

Apakah itu Ujian Padanan Pixel?

Jika anda perlu membandingkan dua imej untuk menyemak sama ada terdapat perbezaan antara maka anda boleh menggunakan ujian padanan piksel untuk tujuan ini. Terdapat dua jenis imej, imej asal dan diubah suai imej. Anda boleh menggunakan aplikasi yang boleh mengambil imej daripada tangkapan skrin apl anda dan selepas itu, perpustakaan perbandingan imej boleh digunakan untuk membandingkan imej ini dan memaparkan hasilnya.

Membandingkan Imej melalui Perpustakaan JavaScript

Pixelmatch perpustakaan sumber terbuka telah menyediakan fungsi lengkap untuk membandingkan imej dalam aplikasi JavaScript dengan mudah. Pembangun perisian perlu menyediakan data imej untuk perbandingan serta tempat output di mana ia perlu menulis data imej dengan perbezaan. Mereka juga perlu menyediakan dimensi iaitu lebar dan tinggi bagi ketiga-tiga imej tersebut. Anda boleh menggunakan pilihan ambang yang membolehkan imej berbeza sedikit, yang boleh menjadi hebat dalam beberapa kes. Sila ambil perhatian bahawa pustaka pixelmatch memerlukan imej mestilah mempunyai saiz yang sama.

Perbandingan Imej Dalam Talian melalui API JavaScript

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);

Bandingkan Imej dalam Node.js melalui pixelmatch

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
 Melayu