API JavaScript open source per confrontare immagini
La libreria JavaScript consente ai programmatori di software di confrontare due immagini in più ambienti come Node o browser ecc.
A volte è necessario confrontare due immagini per vedere quanto sono simili. È un processo molto complicato e richiede una buona conoscenza per realizzarlo. La libreria pixelmatch open source può essere una scelta molto utile per confrontare due immagini in qualsiasi ambiente. Poiché la libreria non ha dipendenze e funziona su array di dati di immagine digitati grezzi, può essere utilizzata in più ambienti come Node o browser, ecc.
Il pixelmatch è di dimensioni molto ridotte e molto semplice da usare, ma è una libreria di confronto di immagini a livello di pixel molto veloce. È scritto in JavaScript e inizialmente creato per confrontare gli screenshot nei test. La libreria supporta funzionalità come il rilevamento dei pixel con anti-alias e le metriche percettive della differenza di colore.
Il rilevamento dell'anti-alias è una funzionalità molto utile perché di solito è stato osservato che il rendering degli stessi dati su applicazioni, dispositivi o sistemi operativi diversi può generare risultati leggermente diversi. Ma soprattutto si consiglia di ignorare queste piccole differenze o test per acquisire dati più significativi.
Per iniziare con pixelmatch
Il modo consigliato per installare pixelmatch è tramite NPM. Si prega di utilizzare il seguente comando per installarlo.
Installa pixelmatch tramite NPM
npm install pixelmatch Che cos'è il Pixel Match Test?
Se hai bisogno di confrontare due immagini per verificare se c'è qualche differenza tra, puoi utilizzare il test di corrispondenza dei pixel per questo scopo. Possono essere presenti due tipi di immagini, l'immagine originale e l'immagine modificata immagine. Puoi utilizzare un'applicazione in grado di recuperare le immagini dallo screenshot della tua app e, successivamente, la libreria di confronto delle immagini può essere utilizzata per confrontare queste immagini e visualizzare i risultati.
Confronto di immagini tramite libreria JavaScript
La libreria open source pixelmatch ha fornito funzionalità complete per confrontare facilmente le immagini all'interno di applicazioni JavaScript. Gli sviluppatori di software devono fornire i dati dell'immagine per il confronto, nonché il luogo di output in cui devono scrivere i dati dell'immagine con le differenze. Devono anche fornire la dimensione che è la larghezza e l'altezza delle tre immagini. Puoi utilizzare l'opzione di soglia che consente alle immagini di essere leggermente diverse, il che può essere ottimo in alcuni casi. Tieni presente che la libreria pixelmatch richiede che le immagini abbiano le stesse dimensioni.
Immagini Confronto online via JavaScript API
const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);
Confronta le immagini in Node.js tramite pixelmatch
const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
