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

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

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

 npm install looks-same 

Συγκρίνετε εικόνες PNG μέσα σε εφαρμογές JavaScript

Η βιβλιοθήκη LooksSame δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να συγκρίνουν μέσω προγραμματισμού τις εικόνες PNG τους χρησιμοποιώντας το Node.js. Πρέπει να παρέχετε τη σωστή διαδρομή προς τις εικόνες PNG ή την προσωρινή μνήμη ως παράμετρο. Ένα απλό παράδειγμα σύγκρισης εικόνων μπορεί να είναι να τραβήξετε ένα στιγμιότυπο οθόνης του στοιχείου DOM με την εικόνα και να χρησιμοποιήσετε τη βιβλιοθήκη για να το συγκρίνετε με την τοπική εικόνα. Μπορείτε επίσης να χρησιμοποιήσετε το RequestLogger για να καταγράψετε ένα αίτημα για την εικόνα και να συγκρίνετε το σώμα απόκρισης με το τοπικό αρχείο χρησιμοποιώντας τη μέθοδο Buffer.compare().

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

Συγκρίνετε εικόνες PNG αγνοώντας το Antialiasing

Κάθε εικόνα αποτελείται από pixel και ενώ συγκρίνετε αυτές τις εικόνες συγκρίνετε το χρώμα κάθε pixel στην εικόνα ένα με το χρώμα pixel στην αντίστοιχη θέση της εικόνας. Έτσι, σε περίπτωση που κάποια pixel είναι ανόμοια, τότε μπορείτε να πείτε ότι οι εικόνες δεν ταιριάζουν. Συνήθως, το ψευδώνυμο συμβαίνει όταν η ανάλυση μιας εικόνας είναι πολύ χαμηλή ώστε ο επεξεργαστής να αποδίδει σωστά ομαλές γραμμές. Η τεχνική anti-aliasing εφαρμόζεται για να δώσει πιο ομαλή εμφάνιση και έτσι να έχετε διαφορετικά αποτελέσματα σύγκρισης ανά περιβάλλον. Ορισμένες εικόνες έχουν διαφορές κατά τη σύγκριση τους λόγω της αντιαλλιοποίησης. Η βιβλιοθήκη LooksSame ασχολείται με ζητήματα κατά της παραμόρφωσης αγνοώντας ορισμένα από τα εικονοστοιχεία όπου είναι πιθανό να έχει συμβεί η αντιπαράθεση. Αυτές οι διαφορές θα αγνοηθούν από προεπιλογή.

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 αντι-αλλοίωση 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 αντι-αλλοίωση issues by ignoring certain of the pixels where αντι-αλλοίωση is likely to have occurred. These differences will be ignored by default.

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

Σύγκριση εικόνων από το Ignoring Caret

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