API JavaScript per confrontare immagini PNG
Libreria JavaScript open source che supporta il confronto di immagini PNG all'interno di app JavaScript. Supporta il confronto di immagini PNG ignorando l'antialiasing e ignorando il cursore.
Confrontare le immagini con le immagini utilizzando JavaScript può essere piuttosto difficile e impegnativo. Scegliere lo strumento sbagliato può anche influenzare notevolmente le prestazioni. LooksSame è una libreria JavaScript open source che include funzionalità per confrontare immagini PNG all'interno di applicazioni JavaScript e funzionerà immediatamente su ogni macchina. La libreria è stata creata tenendo conto della percezione umana del colore. La libreria è stata creata principalmente per le esigenze di test di regressione visiva per l'utilità Gemini.
Questa libreria consente agli sviluppatori di confrontare facilmente e rapidamente la differenza tra due immagini PNG utilizzando i comandi JavaScript. Ha fornito supporto per l'elaborazione di immagini PNG fornendo percorsi ai file o immagini all'interno del buffer. L'utilizzo delle impostazioni predefinite identificherà solo la differenza evidente e se è necessario rilevare eventuali differenze particolari, selezionare l'opzione rigorosa.
La libreria ha fornito supporto per diverse importanti funzionalità relative al confronto di immagini come il confronto di immagini ignorando il cursore, il confronto di immagini ignorando l'antialias, l'ottenimento di limiti diff, l'ottenimento di cluster diff, la creazione di immagini diff, la creazione di immagini diff come buffer, il confronto di colori e molti altri.
Iniziare con LooksSame
Il modo consigliato per installare LooksSameis tramite NPM. Si prega di utilizzare il seguente comando per installarlo.
Installa Looksame tramite NPM
npm install looks-same Confronta le immagini PNG all'interno delle app JavaScript
La libreria LooksSame offre ai programmatori software la possibilità di confrontare a livello di codice le loro immagini PNG utilizzando Node.js. È necessario fornire il percorso corretto alle immagini PNG o al buffer come parametro. Un semplice esempio di confronto di immagini può essere quello di acquisire uno screenshot dell'elemento DOM con l'immagine e utilizzare la libreria per confrontarlo con l'immagine locale. È inoltre possibile utilizzare RequestLogger per registrare una richiesta per l'immagine e confrontare il corpo della risposta con il file locale utilizzando il metodo Buffer.compare().
Confronta le immagini NG tramite JavaScript API
var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
// equal will be true, if images looks the same
});
Confronta le immagini PNG ignorando l'antialias
Ogni immagine è composta da pixel e durante il confronto di queste immagini si confronta il colore di ogni pixel nell'immagine uno con il colore del pixel nella posizione corrispondente dell'immagine. Quindi, nel caso in cui alcuni pixel siano dissimili, puoi dire che le immagini non corrispondono. Di solito, l'aliasing si verifica quando la risoluzione di un'immagine è molto bassa per consentire al processore di riprodurre correttamente le linee morbide. La tecnica anti-aliasing viene applicata per conferire un aspetto più uniforme e ottenere così risultati di confronto diversi per ambiente. Alcune immagini presentano differenze durante il confronto a causa dell'antialiasing. La libreria LooksSame risolve i problemi di anti-alias ignorando alcuni pixel in cui è probabile che si sia verificato l'anti-alias. Queste differenze verranno ignorate per impostazione predefinita.
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.
Confronta le immagini ignorando 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);
Confronto di immagini ignorando il cursore
La libreria gratuita LooksSame ha fornito funzionalità per ignorare il cursore sulle caselle di input durante il confronto di due immagini all'interno delle proprie applicazioni. Il cursore del testo nell'elemento di input del testo è una seccatura per le attività di regressione visiva perché lampeggia sempre. A volte, quando si confrontano due caselle di testo o immagini di caselle di input, a causa dell'accento posto sull'immagine, il confronto non riesce per la differenza di pixel. Quindi puoi ignorare l'opzione del cursore per disabilitare l'ignoranza di tali differenze.
