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

JavaScript API til at sammenligne PNG-billeder

Open Source JavaScript-bibliotek, der understøtter sammenligning af PNG-billeder i JavaScript-apps. Det understøtter sammenligning af PNG-billeder ved at ignorere antialiasing og ved at ignorere caret. 

Det kan være ret svært og udfordrende at sammenligne billeder med billeder ved hjælp af JavaScript. At vælge det forkerte værktøj kan også i høj grad påvirke ydeevnen. LooksSame er et open source JavaScript-bibliotek, der har inkluderet funktionalitet til sammenligning af PNG-billeder inde i JavaScript-applikationer og vil fungere ud af boksen på hver maskine. Biblioteket er blevet til under hensyntagen til menneskelig farveopfattelse. Biblioteket blev hovedsageligt skabt til behovene for visuel regressionstest til Gemini-værktøjet.

Dette bibliotek giver udviklere mulighed for hurtigt og nemt at sammenligne forskellen mellem to PNG-billeder med lethed ved hjælp af JavaScript-kommandoer. Det har givet support til behandling af PNG-billeder enten ved at give stier til filerne eller billeder inde i bufferen. Brug af standardindstillingerne vil kun identificere den mærkbare forskel, og hvis du har brug for at opdage særlige forskelle, skal du vælge den strenge mulighed.

Biblioteket har ydet understøttelse af flere vigtige funktioner relateret til billedsammenligninger, såsom sammenligning af billeder med ignorering af caret, sammenligning af billeder med ignorering af antialiasing, få diff-grænser, få diff-klynger, bygning af diff-billeder, opbygning af diff-billeder som en buffer, sammenligning af farver og mange flere.

Previous Next

Kom godt i gang med LooksSame

Den anbefalede måde at installere LooksSameis på via NPM. Brug venligst følgende kommando til at installere det.

Installer LooksSame via NPM

 npm install looks-same

Sammenlign PNG-billeder i JavaScript-apps

LooksSame-biblioteket giver softwareprogrammører mulighed for programmæssigt at sammenligne deres PNG-billeder ved hjælp af Node.js. Du skal angive den korrekte sti til PNG-billederne eller bufferen som en parameter. Et simpelt eksempel på billedsammenligning kan være at tage et skærmbillede af DOM-elementet med billedet og bruge biblioteket til at sammenligne det med det lokale billede. Du kan også bruge RequestLogger til at logge en anmodning om billedet og sammenligne svarteksten med den lokale fil ved hjælp af Buffer.compare()-metoden.

Sammenlign PNG-billeder 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-billeder ved at ignorere antialiasing

Hvert billede består af pixels, og mens du sammenligner disse billeder, sammenligner du hver pixels farve i billede ét med pixelfarven på den tilsvarende placering af billedet. Så i tilfælde af, at nogle pixels er forskellige, kan du se, at billederne ikke matcher. Normalt sker aliasing, når et billedes opløsning er meget lav, for at processoren kan gengive glatte linjer korrekt. anti-aliasing-teknikken anvendes for at give et mere glat udseende og dermed får du forskellige sammenligningsresultater pr. miljø. Nogle billeder har forskelle, mens de sammenlignes på grund af antialiasing. LooksSame-biblioteket behandler problemer med anti-aliasing ved at ignorere visse af de pixels, hvor anti-aliasing sandsynligvis har fundet sted. Disse forskelle vil blive ignoreret 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 billeder ved at 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);

Billedsammenligning ved at ignorere Caret

Det gratis LooksSame-bibliotek har givet funktionalitet til at ignorere indtastningsfelter, mens to billeder sammenlignes i deres egne applikationer. Teksten i tekstinput-elementet er en smerte for visuelle regressionsopgaver, fordi den altid blinker. Nogle gange, når man sammenligner to tekstbokse eller inputboksbilleder, på grund af billedet, giv en varsel, at sammenligningen mislykkes for pixelforskel. Så du kan ignorere caret-indstillingen for at deaktivere ignorering af sådanne forskelle.

 Dansk