1. Producten
  2.   Afbeelding
  3.   JavaScript
  4.   pixelmatch
 
  

Open Source JavaScript API om afbeeldingen te vergelijken

Met JavaScript-bibliotheek kunnen softwareprogrammeurs twee afbeeldingen vergelijken in meerdere omgevingen zoals Node of browsers enz.

Soms is het nodig om twee afbeeldingen met elkaar te vergelijken om te zien hoe vergelijkbaar ze zijn. Het is een zeer ingewikkeld proces en vereist goede kennis om het te volbrengen. De open source pixelmatch-bibliotheek kan een zeer nuttige keuze zijn voor het vergelijken van twee afbeeldingen in elke omgeving. Omdat de bibliotheek geen afhankelijkheden heeft en werkt op onbewerkte getypte arrays van afbeeldingsgegevens, kan deze dus in meerdere omgevingen worden gebruikt, zoals Node of browsers, enz.

De pixelmatch is erg klein van formaat en zeer eenvoudig te gebruiken, maar is een zeer snelle beeldvergelijkingsbibliotheek op pixelniveau. Het is geschreven in JavaScript en oorspronkelijk gemaakt om schermafbeeldingen in tests te vergelijken. De bibliotheek ondersteunt functies zoals anti-aliased pixeldetectie en perceptuele kleurverschilstatistieken.

Anti-aliasingdetectie is een zeer nuttige functie omdat meestal is waargenomen dat het weergeven van dezelfde gegevens op verschillende toepassingen, apparaten of besturingssystemen enigszins verschillende resultaten kan opleveren. Maar meestal wordt aanbevolen om deze kleine verschillen of tests te negeren om meer betekenisvolle gegevens vast te leggen.

Previous Next

Aan de slag met pixelmatch

De aanbevolen manier om pixelmatch te installeren is via NPM. Gebruik de volgende opdracht om het te installeren.

Installeer pixelmatch via NPM

 npm install pixelmatch

Wat is Pixel Match-testen?

Als u twee afbeeldingen moet vergelijken om te controleren of er een verschil is tussen, dan kunt u hiervoor pixelmatch-testen gebruiken. Er kunnen twee soorten afbeeldingen zijn: de originele afbeelding en de aangepaste afbeelding. U kunt een applicatie gebruiken die afbeeldingen kan ophalen van de schermafbeelding van uw app en daarna kan de afbeeldingsvergelijkingsbibliotheek worden gebruikt om deze afbeeldingen te vergelijken en de resultaten weer te geven.

Afbeeldingen vergelijken via JavaScript-bibliotheek

De open source-bibliotheek pixelmatch heeft volledige functionaliteit geboden om afbeeldingen in JavaScript-applicaties gemakkelijk te vergelijken. Softwareontwikkelaars moeten afbeeldingsgegevens ter vergelijking verstrekken, evenals de uitvoerplaats waar de afbeeldingsgegevens met de verschillen moeten worden geschreven. Ze moeten ook de dimensie opgeven die de breedte en hoogte van de drie afbeeldingen is. U kunt de drempeloptie gebruiken waarmee de afbeeldingen iets anders kunnen zijn, wat in sommige gevallen geweldig kan zijn. Houd er rekening mee dat de pixelmatch-bibliotheek vereist dat afbeeldingen van dezelfde grootte moeten zijn.

Vertaling:

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

Compare Images in Node. j via 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));
 Dutch