JavaScript API om PNG-afbeeldingen te vergelijken
Open Source JavaScript-bibliotheek die het vergelijken van PNG-afbeeldingen in JavaScript-apps ondersteunt. Het ondersteunt het vergelijken van PNG-afbeeldingen door anti-aliasing te negeren en door caret te negeren.
Afbeeldingen vergelijken met afbeeldingen met JavaScript kan behoorlijk moeilijk en uitdagend zijn. Het kiezen van de verkeerde tool kan ook een grote invloed hebben op de prestaties. LooksSame is een open source JavaScript-bibliotheek met functionaliteit voor het vergelijken van PNG-afbeeldingen in JavaScript-applicaties en werkt direct op elke machine. De bibliotheek is gemaakt met inachtneming van de menselijke kleurperceptie. De bibliotheek is voornamelijk gemaakt voor de behoeften van visuele regressietests voor het Gemini-hulpprogramma.
Met deze bibliotheek kunnen ontwikkelaars snel en eenvoudig het verschil tussen twee PNG-afbeeldingen vergelijken met behulp van JavaScript-opdrachten. Het heeft ondersteuning geboden voor het verwerken van PNG-afbeeldingen, hetzij door paden naar de bestanden of afbeeldingen in de buffer te bieden. Als u de standaardinstellingen gebruikt, wordt alleen het merkbare verschil geïdentificeerd en als u bepaalde verschillen moet detecteren, selecteert u de strikte optie.
De bibliotheek heeft ondersteuning geboden voor verschillende belangrijke functies met betrekking tot beeldvergelijkingen, zoals het vergelijken van afbeeldingen met het negeren van caret, het vergelijken van afbeeldingen met het negeren van antialiasing, het verkrijgen van diff-grenzen, het verkrijgen van diff-clusters, het bouwen van diff-afbeeldingen, het bouwen van diff-afbeeldingen als buffer, het vergelijken van kleuren en veel meer.
Aan de slag met LooksSame
De aanbevolen manier om LooksSameis te installeren via NPM. Gebruik de volgende opdracht om het te installeren.
LooksSame installeren via NPM
npm install looks-same Vergelijk PNG-afbeeldingen in JavaScript-apps
De LooksSame-bibliotheek geeft softwareprogrammeurs de mogelijkheid om hun PNG-afbeeldingen programmatisch te vergelijken met Node.js. U moet het juiste pad naar de PNG-afbeeldingen of buffer als parameter opgeven. Een eenvoudig voorbeeld van afbeeldingsvergelijking kan zijn om een screenshot van het DOM-element met de afbeelding te maken en de bibliotheek te gebruiken om deze te vergelijken met de lokale afbeelding. U kunt RequestLogger ook gebruiken om een aanvraag voor de afbeelding vast te leggen en de antwoordtekst te vergelijken met het lokale bestand met behulp van de Buffer.compare()-methode.
Quality over Quantity (QoQ) Releases Vertaling:
var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
// equal will be true, if images looks the same
});
Vergelijk PNG-afbeeldingen door anti-aliasing te negeren
Elke afbeelding bestaat uit pixels en tijdens het vergelijken van deze afbeeldingen vergelijkt u de kleur van elke pixel in afbeelding één met de pixelkleur op de overeenkomstige locatie van de afbeelding. Dus als sommige pixels niet op elkaar lijken, kun je zien dat de afbeeldingen niet overeenkomen. Meestal vindt aliasing plaats wanneer de resolutie van een afbeelding erg laag is voor de processor om vloeiende lijnen correct weer te geven. De anti-aliasing techniek wordt toegepast om een gladder uiterlijk te geven en zo krijg je verschillende vergelijkingsresultaten per omgeving. Sommige afbeeldingen hebben verschillen bij het vergelijken vanwege anti-aliasing. De LooksSame-bibliotheek behandelt problemen met anti-aliasing door bepaalde pixels te negeren waar anti-aliasing waarschijnlijk is opgetreden. Deze verschillen worden standaard genegeerd.
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 anti-aliasing 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 anti-aliasing issues by ignoring certain of the pixels where anti-aliasing is likely to have occurred. These differences will be ignored by default.
Quality over Quantity (QoQ) Releases Vertaling:
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);
Vergelijking van afbeeldingen door Caret te negeren
De gratis LooksSame-bibliotheek heeft functionaliteit geboden voor het negeren van caret op invoervakken terwijl twee afbeeldingen in hun eigen applicaties worden vergeleken. Tekstcaret in het tekstinvoerelement is lastig voor visuele regressietaken omdat het altijd knippert. Soms bij het vergelijken van twee tekstvakken of invoervakafbeeldingen, omdat de afbeelding een caret geeft, faalt de vergelijking voor pixelverschil. U kunt dus de caret-optie negeren om het negeren van dergelijke verschillen uit te schakelen.
