JavaScript-API zum Vergleichen von PNG-Bildern
Open-Source-JavaScript-Bibliothek, die den Vergleich von PNG-Bildern in JavaScript-Apps unterstützt. Es unterstützt den Vergleich von PNG-Bildern durch Ignorieren von Antialiasing und durch Ignorieren von Caret.
Das Vergleichen von Bildern mit JavaScript kann ziemlich schwierig und schwierig sein. Das Auswählen des falschen Werkzeugs kann auch die Leistung stark beeinflussen. LooksSame ist eine Open Source JavaScript Bibliothek, die Funktionalität zum Vergleich von NG-Bildern innerhalb von JavaScript Anwendungen enthält und auf jeder Maschine aus dem Kasten funktioniert. Die Bibliothek wurde unter Berücksichtigung der menschlichen Farbwahrnehmung erstellt. Die Bibliothek wurde hauptsächlich für den Bedarf an visuellen Regressionstests für das Hilfsprogramm Gemini erstellt.
Diese Bibliothek ermöglicht es Entwicklern, mithilfe von JavaScript-Befehlen schnell und einfach den Unterschied zwischen zwei PNG-Bildern zu vergleichen. Es bietet Unterstützung für die Verarbeitung von PNG-Bildern, indem es entweder Pfade zu den Dateien oder Bildern im Puffer bereitstellt. Bei Verwendung der Standardeinstellungen wird nur der wahrnehmbare Unterschied erkannt, und wenn Sie bestimmte Unterschiede erkennen müssen, wählen Sie bitte die strenge Option.
Die Bibliothek bietet Unterstützung für mehrere wichtige Funktionen im Zusammenhang mit Bildvergleichen, wie zum Beispiel das Vergleichen von Bildern mit ignorierender Sorgfalt, Vergleichen von Bildern mit Antialiasing, Diff-Clustern, Erstellen.
Erste Schritte mit LooksSame
Der empfohlene Weg, LooksSam zu installieren, ist über NPM. Bitte verwenden Sie den folgenden Befehl, um es zu installieren.
Installieren Sie LooksSame über NPM
npm install looks-same Vergleichen Sie PNG-Bilder in JavaScript-Apps
Die LooksSame-Bibliothek gibt Softwareprogrammierern die Möglichkeit, ihre PNG-Bilder mit Node.js programmgesteuert zu vergleichen. Sie müssen den richtigen Pfad zu den PNG-Bildern oder dem Puffer als Parameter angeben. Ein einfaches Beispiel für einen Bildvergleich kann darin bestehen, einen Screenshot des DOM-Elements mit dem Bild zu erstellen und die Bibliothek zu verwenden, um es mit dem lokalen Bild zu vergleichen. Sie können RequestLogger auch verwenden, um eine Anforderung für das Bild zu protokollieren und den Antworttext mithilfe der Methode Buffer.compare() mit der lokalen Datei zu vergleichen.
Vergleichen Sie NG Images über JavaScript API
var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
// equal will be true, if images looks the same
});
Vergleichen Sie PNG-Bilder, indem Sie Antialiasing ignorieren
Jedes Bild besteht aus Pixeln und beim Vergleich dieser Bilder vergleichen Sie die Farbe jedes Pixels im Bild eins mit der Pixelfarbe in der entsprechenden Position des Bildes. Falls also einige Pixel unterschiedlich sind, können Sie feststellen, dass die Bilder nicht übereinstimmen. Normalerweise tritt das auf, wenn die Auflösung des Bildes sehr gering ist, damit der Prozessor korrekte Linien darstellen kann. Diese Methode wird angewandt, um ein glatteres Aussehen zu erzielen und somit unterschiedliche Vergleichsergebnisse pro Umgebung zu erhalten. Einige Bilder haben Unterschiede beim Vergleichen, weil sie gegen die Kantenglättung wirken. Die LooksSame Bibliothek behandelt Probleme der Bekämpfung, indem sie bestimmte Pixel ignoriert, bei denen es wahrscheinlich zu einer Anti-Aktivierung gekommen ist. Diese Unterschiede werden standardmäßig ignoriert.
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 Kantenglättung 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 Kantenglättung issues by ignoring certain of the pixels where Kantenglättung is likely to have occurred. These differences will be ignored by default.
Vergleichen Sie Images durch Ignorieren von Antialiasing & Care via JavaScript
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);
Bildvergleich durch Ignorieren von Caret
Die kostenlose LooksSame-Bibliothek bietet Funktionen zum Ignorieren von Caret-Zeichen in Eingabefeldern, während zwei Bilder in ihren eigenen Anwendungen verglichen werden. Textcursor im Texteingabeelement ist ein Problem für visuelle Regressionsaufgaben, da es immer blinkt. Manchmal, wenn zwei Textfelder oder Bilder von Eingabefeldern verglichen werden, schlägt der Vergleich wegen der Pixeldifferenz fehl, weil das Bild mit Caretzeichen versehen ist. Sie können also die Caret-Option ignorieren, um das Ignorieren solcher Unterschiede zu deaktivieren.
