Kostenlose Node.js-API zum Bildvergleich
Open-Source-API auf Basis von Node.js, die Bilder Pixel für Pixel vergleicht. Eine leistungsstarke, flexible und effiziente Lösung für den Bildvergleich in Node.js-Anwendungen.
Bildvergleiche spielen eine wichtige Rolle bei der Softwareentwicklung, insbesondere in Bereichen wie visuelle Regressionstests, Bildqualitätssicherung und pixelgenaue Designüberprüfung. Ob Sie Software entwickeln, um ein konsistentes Erscheinungsbild der Benutzeroberfläche auf mehreren Plattformen sicherzustellen, oder visuelle Prüfungen in einer Produktionspipeline automatisieren, ein effizientes Bildvergleichstool ist unerlässlich. LooksSame, eine von Gemini-Testing entwickelte Open-Source-API, vereinfacht mit ihren intuitiven Funktionen den Prozess der Erstellung von Software für den Bildvergleich. Die Bibliothek umfasst mehrere wichtige Funktionen wie Pixel-für-Pixel-Bildvergleich, Anti-Aliasing-Erkennung, Toleranzsteuerung konfigurieren, Handhabung von Bildabmessungen, Unterstützung für Promises und vieles mehr.
LooksSame ist eine Node.js-basierte API für den Bildvergleich. Sie ermöglicht Entwicklern, Bilder Pixel für Pixel zu vergleichen, mit Optionen zur Handhabung kleiner Abweichungen, die aufgrund von Unterschieden in den Rendering-Umgebungen auftreten können. Durch die Nutzung der Bibliothek können Softwareentwickler ihre eigenen Anwendungen erstellen, die signifikante visuelle Unterschiede erkennen und dabei triviale Abweichungen ignorieren. Die API ist in erster Linie darauf ausgerichtet, Entwicklern dabei zu helfen, die Konsistenz im UI-Design aufrechtzuerhalten, aber ihre Vielseitigkeit macht sie auch für viele andere Anwendungsfälle zum Bildvergleich geeignet. Mit ihrer unkomplizierten API und den anpassbaren Optionen ist LooksSame eine großartige Ergänzung für das Toolkit jedes Entwicklers, insbesondere für webbasierte UI-Tests, die automatische Bildgenerierung und andere Szenarien, in denen visuelle Genauigkeit von größter Bedeutung ist.
Erste Schritte mit LooksSame
Die empfohlene Methode zur Installation von LooksSame ist die Verwendung von NPM. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation.
Installieren Sie LooksSame über NPM
npm install looks-same
Einfacher Bildvergleich in Node.js-Apps
Die Open-Source-Bibliothek LooksSame erleichtert Softwareentwicklern den einfachen Bildvergleich in Node.js-Anwendungen. Nach der Installation können Sie zwei Bilder vergleichen, indem Sie das Modul LooksSame in Ihrem Code anfordern. Hier ist ein einfaches Beispiel, das zeigt, wie Sie mit der Bibliothek prüfen können, ob zwei Bilder optisch identisch sind: In diesem Beispiel werden image1.png und image2.png verglichen. Wenn sie optisch identisch sind, gibt „equal“ „true“ zurück, andernfalls „false“.
Wie vergleicht man zwei Bilder in Node.js-Apps?
const looksSame = require('looks-same');
// Compare two images
looksSame('image1.png', 'image2.png', (error, { equal }) => {
if (error) {
console.error('Error comparing images:', error);
} else if (equal) {
console.log('Images are identical!');
} else {
console.log('Images differ!');
}
});
Toleranzbasierter Bildvergleich
Für Anwendungen, die keine pixelgenauen Übereinstimmungen erfordern, können Softwareentwickler eine Toleranzstufe hinzufügen. Dadurch können kleine Unterschiede zwischen Bildern, wie z. B. Änderungen aufgrund der Darstellung in unterschiedlichen Browsern oder Betriebssystemen, ignoriert werden. Im folgenden Codebeispiel ist die Toleranz auf 5 % eingestellt, was bedeutet, dass kleine Pixelabweichungen (bis zu 5 %) nicht dazu führen, dass die Bilder als unterschiedlich angesehen werden.
Wie führe ich einen toleranzbasierten Bildvergleich in Node.js-Apps durch?
cfunction compareWithTolerance(image1, image2, toleranceLevel) {
looksSame(image1, image2, { tolerance: toleranceLevel }, (error, { equal }) => {
if (error) {
console.error('Error comparing images:', error);
} else if (equal) {
console.log('Images are visually identical within tolerance!');
} else {
console.log('Images differ!');
}
});
}
// Usage
compareWithTolerance('image1.png', 'image2.png', 5); // 5% tolerance
Hervorheben bestimmter Bereiche mit Unterschieden
Bei anspruchsvolleren Anwendungen möchten Softwareentwickler möglicherweise nur bestimmte Bereiche mit Unterschieden identifizieren und analysieren. Die LooksSame-Bibliothek bietet eine Begrenzungsrahmenfunktion, die den genauen Bereich anzeigt, in dem Unterschiede auftreten. Diese Funktion gibt die Begrenzungsrahmenkoordinaten der unterschiedlichen Bereiche aus, sodass es einfacher ist, sich auf bestimmte Teile des Bildes zu konzentrieren, die sich geändert haben. Das folgende Beispiel zeigt, wie Sie Begrenzungsrahmenkoordinaten verwenden, um Bilder zu vergleichen und die Unterschiede hervorzuheben.
Wie kann man die Unterschiede zwischen bestimmten Bildbereichen mithilfe von Node.js-Apps vergleichen und identifizieren?
function compareWithDiffBounds(image1, image2) {
looksSame(image1, image2, (error, { diffBounds }) => {
if (error) {
console.error('Error comparing images:', error);
} else {
console.log('Bounding box of differences:', diffBounds);
}
});
}
// Usage
compareWithDiffBounds('image1.png', 'image2.png');
Anti-Aliasing-Erkennung für genaue Vergleiche
Die Open-Source-Bibliothek LooksSame ermöglicht Softwareentwicklern die Bildkomprimierung durch Verwendung der Anti-Aliasing-Erkennungsmethode in Node.js-Anwendungen. Anti-Aliasing kann beim Vergleich von Bildern zu Fehlalarmen führen, da es leichte Abweichungen bei der Kantendarstellung verursacht. Die Option ignoreAntialiasing der Bibliothek hilft, diese Fehlalarme zu vermeiden. Dies ist besonders nützlich für Anwendungen, bei denen Bilder auf verschiedenen Geräten oder Browsern unterschiedlich dargestellt werden können, aber optisch immer noch gleich sind.