1. Produkter
  2.   Bilde
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API for å sammenligne PNG-bilder

Open Source JavaScript-bibliotek som støtter sammenligning av PNG-bilder i JavaScript-apper. Den støtter sammenligning av PNG-bilder ved å ignorere kantutjevnelse og ved å ignorere merket. 

Å sammenligne bilder med bilder ved hjelp av JavaScript kan være ganske vanskelig og utfordrende. Å velge feil verktøy kan også ha stor innvirkning på ytelsen. LooksSame er et JavaScript-bibliotek med åpen kildekode som har inkludert funksjonalitet for å sammenligne PNG-bilder i JavaScript-applikasjoner, og vil fungere ut av boksen på hver maskin. Biblioteket er opprettet under hensyntagen til menneskelig fargeoppfatning. Biblioteket ble hovedsakelig opprettet for behovene til visuell regresjonstesting for Gemini-verktøyet.

Dette biblioteket lar utviklere raskt og enkelt sammenligne forskjellen mellom to PNG-bilder med letthet ved å bruke JavaScript-kommandoer. Den har gitt støtte for behandling av PNG-bilder enten ved å gi stier til filene eller bildene inne i bufferen. Bruk av standardinnstillingene vil bare identifisere den merkbare forskjellen, og hvis du trenger å oppdage noen spesielle forskjeller, velg det strenge alternativet.

Biblioteket har gitt støtte for flere viktige funksjoner relatert til bildesammenligninger, som å sammenligne bilder med å ignorere merket, sammenligne bilder med å ignorere antialiasing, få diff-grenser, få diff-klynger, bygge diff-bilder, bygge diff-bilder som en buffer, sammenligne farger, og mange flere.

Previous Next

Komme i gang med LooksSame

Den anbefalte måten å installere LooksSameis på via NPM. Bruk følgende kommando for å installere den.

Installer LooksSame via NPM

 npm install looks-same

Sammenlign PNG-bilder i JavaScript-apper

LooksSame-biblioteket gir programvareprogrammerere muligheten til å programmatisk sammenligne PNG-bildene sine ved å bruke Node.js. Du må angi riktig bane til PNG-bildene eller bufferen som en parameter. Et enkelt eksempel på bildesammenligning kan være å ta et skjermbilde av DOM-elementet med bildet og bruke biblioteket til å sammenligne det med det lokale bildet. Du kan også bruke RequestLogger til å logge en forespørsel om bildet og sammenligne svarteksten med den lokale filen ved å bruke Buffer.compare()-metoden.

Sammenlign PNG-bilder via JavaScript API

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

Sammenlign PNG-bilder ved å ignorere antialiasing

Hvert bilde består av piksler, og mens du sammenligner disse bildene, sammenligner du hver piksels farge i bilde ett med pikselfargen på den tilsvarende plasseringen av bildet. Så i tilfelle noen piksler er forskjellige, kan du se at bildene ikke samsvarer. Vanligvis skjer aliasing når et bildes oppløsning er veldig lav for at prosessoren skal gjengi jevne linjer på riktig måte. Teknikken anti-aliasing brukes for å gi et jevnere utseende og dermed får du forskjellige sammenligningsresultater per miljø. Noen bilder har forskjeller mens de sammenlignes på grunn av kantutjevnelse. LooksSame-biblioteket håndterer problemer med kantutjevnelse ved å ignorere enkelte av pikslene der utjevning sannsynligvis har skjedd. Disse forskjellene vil bli ignorert som standard.

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.

Sammenlign bilder ved å ignorere Antialiasing & Caret 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);

Sammenligning av bilder ved å ignorere Caret

Det gratis LooksSame-biblioteket har gitt funksjonalitet for å ignorere caret på inndatabokser mens du sammenligner to bilder i sine egne applikasjoner. Tekstmerke i tekstinndataelementet er en smerte for visuelle regresjonsoppgaver fordi den alltid blinker. Noen ganger når du sammenligner to tekstbokser eller bilder i inndatabokser, på grunn av bildet, gi indikatorer på at sammenligningen mislykkes for pikselforskjell. Så du kan ignorere innstillingsalternativet for å deaktivere ignorering av slike forskjeller.

 Norsk