API JavaScript open source pour comparer les images
La bibliothèque JavaScript permet aux programmeurs de logiciels de comparer deux images dans plusieurs environnements tels que Node ou navigateurs, etc.
Il est parfois nécessaire de comparer deux images pour voir comment elles sont semblables. Il s'agit d'un processus très complexe et exige de bonnes connaissances pour y parvenir. La bibliothèque de pixelmatch à source ouverte peut être un choix très utile pour comparer deux images dans tout environnement. Comme la bibliothèque n'a pas de dépendances et travaille sur des données dactylographiques brutes, elle peut être utilisée dans des environnements multiples comme Node ou navigateur, etc.
Le pixelmatch est de très petite taille et très simple à utiliser, mais il s'agit d'une bibliothèque de comparaison d'images très rapide au niveau des pixels. Il est écrit en JavaScript et initialement créé pour comparer les captures d'écran dans les tests. La bibliothèque prend en charge des fonctionnalités telles que la détection de pixels anti-aliasés et les mesures de différence de couleur perceptive.
La détection anti-arisante est une caractéristique très utile parce qu'on a généralement observé que les mêmes données sur différentes applications, dispositifs ou systèmes d'exploitation peuvent produire des résultats légèrement différents. Mais il est surtout recommandé d'ignorer ces petites différences ou tests pour saisir des données plus significatives.
Premiers pas avec pixelmatch
La méthode recommandée pour installer pixelmatch est via NPM. Veuillez utiliser la commande suivante pour l'installer.
Installer pixelmatch via NPM
npm install pixelmatch Qu'est-ce que le test de correspondance de pixels ?
Si vous avez besoin de comparer deux images pour vérifier s'il y a une différence entre elles, vous pouvez utiliser le test de correspondance des pixels à cette fin. Il peut y avoir deux types d'images, l'image d'origine et l'image modifiée image. Vous pouvez utiliser une application qui peut récupérer des images à partir de la capture d'écran de votre application et après cela, la bibliothèque de comparaison d'images peut être utilisée pour comparer ces images et afficher les résultats.
Comparaison d'images via la bibliothèque JavaScript
Le pixelmatch de la bibliothèque à source ouverte a fourni une fonctionnalité complète pour comparer les images à l'intérieur de JavaScript applications avec facilité. Les concepteurs de logiciels doivent fournir des données d'image pour la comparaison et le lieu de production où ils doivent rédiger les données d'image avec les différences. Ils doivent aussi fournir la dimension qui est la largeur et la hauteur des trois images. Vous pouvez utiliser l'option de seuil qui permet aux images d'être légèrement différentes, ce qui peut être important dans certains cas. Veuillez noter que la bibliothèque de pixelmatch a besoin que les images soient de même taille.
Comparaison des images en ligne par 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);
Comparez les images dans Nodejs par 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));
