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

JavaScript API för att jämföra PNG-bilder

Open Source JavaScript-bibliotek som stöder jämförelse av PNG-bilder i JavaScript-appar. Det stöder jämför PNG-bilder genom att ignorera kantutjämning och genom att ignorera fältet. 

Att jämföra bilder med bilder med hjälp av JavaScript kan vara ganska svårt och utmanande. Att välja fel verktyg kan också i hög grad påverka prestandan. LooksSame är ett JavaScript-bibliotek med öppen källkod som har inkluderat funktionalitet för att jämföra PNG-bilder i JavaScript-applikationer och som fungerar direkt på alla maskiner. Biblioteket har skapats med hänsyn till människans färguppfattning. Biblioteket skapades huvudsakligen för behoven av visuell regressionstestning för Gemini-verktyget.

Detta bibliotek låter utvecklare snabbt och enkelt jämföra skillnaden mellan två PNG-bilder med lätthet med hjälp av JavaScript-kommandon. Det har gett stöd för bearbetning av PNG-bilder antingen genom att tillhandahålla sökvägar till filerna eller bilder inuti bufferten. Om du använder standardinställningarna identifieras endast den märkbara skillnaden och om du behöver upptäcka några speciella skillnader, välj det strikta alternativet.

Biblioteket har tillhandahållit stöd för flera viktiga funktioner relaterade till bildjämförelser som att jämföra bilder med ignorerande fält, jämföra bilder med att ignorera kantutjämning, få diff-gränser, få diff-kluster, bygga diff-bilder, bygga diff-bilder som en buffert, jämföra färger och många fler.

Previous Next

Komma igång med LooksSame

Det rekommenderade sättet att installera LooksSameis via NPM. Använd följande kommando för att installera det.

Installera LooksSame via NPM

 npm install looks-same

Jämför PNG-bilder i JavaScript-appar

LooksSame-biblioteket ger programvaruprogrammerare möjligheten att programmatiskt jämföra sina PNG-bilder med Node.js. Du måste ange rätt sökväg till PNG-bilderna eller bufferten som en parameter. Ett enkelt exempel på bildjämförelse kan vara att ta en skärmdump av DOM-elementet med bilden och använda biblioteket för att jämföra den med den lokala bilden. Du kan också använda RequestLogger för att logga en begäran om bilden och jämföra svarstexten med den lokala filen med metoden Buffer.compare().

Jämför 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
});

Jämför PNG-bilder genom att ignorera kantutjämning

Varje bild består av pixlar och när du jämför dessa bilder jämför du varje pixels färg i bild ett med pixelfärgen på motsvarande plats i bilden. Så om vissa pixlar är olika, kan du se att bilderna inte matchar. Vanligtvis sker aliasing när en bilds upplösning är mycket låg för att processorn ska kunna återge jämna linjer korrekt. Tekniken kantutjämning används för att ge ett jämnare utseende och därmed får du olika jämförelseresultat per miljö. Vissa bilder har skillnader när de jämförs på grund av kantutjämning. LooksSame-biblioteket hanterar problem med kantutjämning genom att ignorera vissa av de pixlar där kantutjämning sannolikt har inträffat. Dessa skillnader kommer att ignoreras 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 kantutjämning 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 kantutjämning issues by ignoring certain of the pixels where kantutjämning is likely to have occurred. These differences will be ignored by default.

Jämför bilder genom att ignorera 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);

Jämförelse av bilder genom att ignorera Caret

Det kostnadsfria LooksSame-biblioteket har tillhandahållit funktionalitet för att ignorera rader på inmatningsrutor medan två bilder jämförs i sina egna applikationer. Textinmatningselementet i textinmatningselementet är jobbigt för visuella regressionsuppgifter eftersom det alltid blinkar. Ibland när man jämför två textrutor eller bilder i inmatningsrutor, på grund av bilden, ge caret, misslyckas jämförelsen för pixelskillnad. Så du kan ignorera alternativet caret för att inaktivera ignorering av sådana skillnader.

 Svenska