1. Προϊόντα
  2.   Εικόνα
  3.   JavaScript
  4.   pixelmatch
 
  

Open Source JavaScript API για σύγκριση εικόνων

Η Βιβλιοθήκη JavaScript επιτρέπει στους προγραμματιστές λογισμικού να συγκρίνουν δύο εικόνες σε πολλαπλά περιβάλλοντα όπως Node ή προγράμματα περιήγησης κ.λπ.

Μερικές φορές απαιτείται να συγκρίνετε δύο εικόνες για να δείτε πόσο όμοιες είναι. Είναι μια πολύ περίπλοκη διαδικασία και απαιτούνται καλές γνώσεις για την ολοκλήρωσή της. Η βιβλιοθήκη ανοιχτού κώδικα pixelmatch μπορεί να είναι μια πολύ χρήσιμη επιλογή για τη σύγκριση δύο εικόνων σε οποιοδήποτε περιβάλλον. Δεδομένου ότι η βιβλιοθήκη δεν έχει εξαρτήσεις και λειτουργεί σε ακατέργαστες πληκτρολογημένες συστοιχίες δεδομένων εικόνας, έτσι μπορεί να χρησιμοποιηθεί σε πολλά περιβάλλοντα όπως το Node ή τα προγράμματα περιήγησης κ.λπ.

Το pixelmatch είναι πολύ μικρό σε μέγεθος και πολύ απλό στη χρήση, αλλά είναι μια πολύ γρήγορη βιβλιοθήκη σύγκρισης εικόνων σε επίπεδο pixel. Είναι γραμμένο σε JavaScript και αρχικά δημιουργήθηκε για να συγκρίνει στιγμιότυπα οθόνης σε δοκιμές. Η βιβλιοθήκη υποστηρίζει λειτουργίες όπως ανίχνευση εικονοστοιχείων κατά του ψευδώνυμου και μετρήσεις αντιληπτικής διαφοράς χρώματος.

Η ανίχνευση κατά της παραμόρφωσης είναι μια πολύ χρήσιμη δυνατότητα, επειδή συνήθως έχει παρατηρηθεί ότι η απόδοση των ίδιων δεδομένων σε διαφορετικές εφαρμογές, συσκευές ή λειτουργικά συστήματα μπορεί να δημιουργήσει ελαφρώς ανόμοια αποτελέσματα. Αλλά κυρίως συνιστάται να αγνοήσετε αυτές τις μικρές διαφορές ή δοκιμές για να συλλέξετε πιο ουσιαστικά δεδομένα.

Previous Next

Ξεκινώντας με το pixelmatch

Ο προτεινόμενος τρόπος εγκατάστασης του pixelmatch είναι μέσω NPM. Χρησιμοποιήστε την παρακάτω εντολή για να το εγκαταστήσετε.

Εγκαταστήστε το pixelmatch μέσω NPM

 npm install pixelmatch

Τι είναι το Pixel Match Testing;

Εάν χρειάζεται να συγκρίνετε δύο εικόνες για να ελέγξετε αν υπάρχει διαφορά μεταξύ τους, μπορείτε να χρησιμοποιήσετε τη δοκιμή αντιστοίχισης pixel για αυτόν τον σκοπό. Μπορεί να υπάρχουν δύο τύποι εικόνων, η αρχική εικόνα και η τροποποιημένη εικόνα. Μπορείτε να χρησιμοποιήσετε μια εφαρμογή που μπορεί να ανακτήσει εικόνες από το στιγμιότυπο οθόνης της εφαρμογής σας και μετά από αυτό, η βιβλιοθήκη σύγκρισης εικόνων μπορεί να χρησιμοποιηθεί για τη σύγκριση αυτών των εικόνων και την εμφάνιση των αποτελεσμάτων.

Σύγκριση εικόνων μέσω JavaScript Library

Η βιβλιοθήκη ανοιχτού κώδικα pixelmatch έχει προσφέρει πλήρη λειτουργικότητα για εύκολη σύγκριση εικόνων εντός εφαρμογών JavaScript. Οι προγραμματιστές λογισμικού πρέπει να παρέχουν δεδομένα εικόνας για σύγκριση καθώς και το σημείο εξόδου όπου πρέπει να γράψουν τα δεδομένα εικόνας με τις διαφορές. Πρέπει επίσης να παρέχουν τη διάσταση που είναι το πλάτος και το ύψος των τριών εικόνων. Μπορείτε να χρησιμοποιήσετε την επιλογή κατωφλίου που επιτρέπει στις εικόνες να είναι ελαφρώς διαφορετικές, κάτι που μπορεί να είναι υπέροχο σε ορισμένες περιπτώσεις. Λάβετε υπόψη ότι η βιβλιοθήκη pixelmatch χρειάζεται οι εικόνες να έχουν τα ίδια μεγέθη.

Σύγκριση online μέσω JavaScript API

 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);

Συγκρίνετε εικόνες στο Node.js μέσω 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));
 Ελληνικά