1. Produkte
  2.   Bild
  3.   JavaScript
  4.   pixelmatch
 
  

Open-Source-JavaScript-API zum Vergleichen von Bildern

Die JavaScript-Bibliothek ermöglicht es Softwareprogrammierern, zwei Bilder in mehreren Umgebungen wie Knoten oder Browsern usw. zu vergleichen.

Manchmal muss man zwei Bilder vergleichen, um zu sehen, wie ähnlich sie sind. Es ist ein sehr komplizierter Prozess und benötigt gutes Wissen, um ihn zu erreichen. Die Open-Source-pixelmatch-Bibliothek kann eine sehr nützliche Wahl sein, um zwei Bilder in jeder Umgebung zu vergleichen. Da die Bibliothek keine Abhängigkeiten hat und mit Raw-Typarrays von Bilddaten arbeitet, kann sie in mehreren Umgebungen wie Knoten oder Browsern usw. verwendet werden.

Das Pixelmatch ist sehr klein und sehr einfach zu verwenden, aber es ist eine sehr schnelle Bildvergleichsbibliothek auf Pixelebene. Es ist in JavaScript geschrieben und wurde ursprünglich erstellt, um Screenshots in Tests zu vergleichen. Die Bibliothek unterstützt Funktionen wie Anti-Aliasing-Pixelerkennung und wahrnehmbare Farbdifferenzmetriken.

Eine Anti-Aktivierungs-Erkennung ist eine sehr nützliche Funktion, da normalerweise beobachtet wurde, dass die selben Daten auf verschiedenen Anwendungen, Geräten oder Betriebssystemen leicht unterschiedliche Ergebnisse erzeugen können. Es wird jedoch vor allem empfohlen, diese kleinen Unterschiede oder Tests zu ignorieren, um sinnvollere Daten zu erfassen.

Previous Next

Erste Schritte mit Pixelmatch

Die empfohlene Methode zur Installation von Pixelmatch ist über NPM. Bitte verwenden Sie den folgenden Befehl, um es zu installieren.

Installieren Sie Pixelmatch über NPM

 npm install pixelmatch

Was ist Pixel-Match-Testing?

Wenn Sie zwei Bilder vergleichen müssen, um zu prüfen, ob es Unterschiede gibt, können Sie zu diesem Zweck Pixel-Match-Tests verwenden. Es kann zwei Arten von Bildern geben, das Originalbild und das geänderte Bild. Sie können eine Anwendung verwenden, die Bilder aus dem Screenshot Ihrer App abrufen kann, und danach kann die Bildvergleichsbibliothek verwendet werden, um diese Bilder zu vergleichen und die Ergebnisse anzuzeigen.

Vergleichen von Bildern über die JavaScript-Bibliothek

Die Pixelmatch der Open-Source-Bibliothek bietet vollständige Funktionalität zum Vergleich von Bildern in JavaScript Anwendungen. Softwareentwickler müssen Bilddaten für den Vergleich und die Ausgabestelle zur Verfügung stellen, wo sie die Bilddaten mit den Unterschieden schreiben müssen. Sie müssen auch die Dimension liefern, die Breite und Höhe der drei Bilder ist. Sie können die Schwellenoption verwenden, die es erlaubt, die Bilder leicht zu verändern, was in einigen Fällen sehr gut sein kann. Bitte beachten Sie, dass Pixelmatch-Bibliothek benötigt, dass die Bilder in denselben Größen sein müssen.

Bilder Vergleich Online via 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);

Vergleichen Sie Bilder in Node.js mit 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));
 Deutsch