API JavaScript pour comparer les images PNG
Bibliothèque JavaScript Open Source qui prend en charge la comparaison des images PNG dans les applications JavaScript. Il prend en charge la comparaison des images PNG en ignorant l'anticrénelage et en ignorant le caret.
La comparaison des images avec des images utilisant JavaScript peut être très difficile et difficile. Le fait de photographier le mauvais outil peut aussi grandement influer sur le rendement. LooksSame est une bibliothèque de la source ouverte JavaScript qui a inclus la fonctionnalité pour comparer les images NG à l'intérieur de JavaScript applications et fonctionnera sur chaque machine. La bibliothèque a été créée tout en tenant compte de la perception de la couleur humaine. La bibliothèque a été créée principalement pour répondre aux besoins des essais de régression visuelle de l'utilité Gemini.
Cette bibliothèque permet aux développeurs de comparer rapidement et facilement la différence entre deux images PNG à l'aide de commandes JavaScript. Il a fourni un support pour le traitement des images PNG en fournissant des chemins vers les fichiers ou les images à l'intérieur du tampon. L'utilisation des paramètres par défaut n'identifiera que la différence notable et si vous avez besoin de détecter des différences particulières, veuillez sélectionner l'option stricte.
La bibliothèque a appuyé plusieurs caractéristiques importantes liées aux comparaisons d'images, telles que la comparaison des images avec les soins d'ignorance, la comparaison d'images et d'images en couleurs.
Premiers pas avec LooksSame
La méthode recommandée pour installer LooksSameest via NPM. Veuillez utiliser la commande suivante pour l'installer.
Installer LooksSame via NPM
npm install looks-same Comparez les images PNG dans les applications JavaScript
La bibliothèque LooksSame donne aux programmeurs de logiciels la possibilité de comparer par programmation leurs images PNG à l'aide de Node.js. Vous devez fournir le chemin d'accès correct aux images PNG ou au tampon en tant que paramètre. Un exemple simple de comparaison d'images peut être de prendre une capture d'écran de l'élément DOM avec l'image et d'utiliser la bibliothèque pour la comparer avec l'image locale. Vous pouvez également utiliser RequestLogger pour consigner une demande d'image et comparer le corps de la réponse avec le fichier local à l'aide de la méthode Buffer.compare().
Comparez les images NG par JavaScript API
var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
// equal will be true, if images looks the same
});
Comparer des images PNG en ignorant l'anticrénelage
Chaque image est constituée de pixels et, en comparant ces images, vous comparez la couleur de chaque pixel en image 1 avec la couleur pixel dans l'emplacement correspondant de l'image. Ainsi, dans le cas de certains pixels sont différents, alors vous pouvez dire que les images ne correspondent pas. Habituellement, il se produit lorsque la résolution d'une image est très faible pour le transformateur afin de rendre correctement les lignes lisses. La technique strong anti-arising /strong est appliquée pour donner une apparence plus claire et obtenir des résultats de comparaison différents par environnement. Certaines images présentent des différences tout en les comparant en raison de l'antialiuration. La LooksSame bibliothèques traite des questions anti-arisantes en ignorant certains pixels où l'antiarisage est probable. Ces différences seront ignorées par défaut.
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 crénelage 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 crénelage issues by ignoring certain of the pixels where anti crénelage is likely to have occurred. These differences will be ignored by default.
Comparez les images par l'ignorance de l'antialiuration et des soins par 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);
Comparaison d'images en ignorant le caret
La bibliothèque gratuite LooksSame a fourni une fonctionnalité permettant d'ignorer le caret dans les zones de saisie tout en comparant deux images dans leurs propres applications. Le curseur de texte dans l'élément de saisie de texte est pénible pour les tâches de régression visuelle car il clignote toujours. Parfois, lors de la comparaison de deux zones de texte ou d'images de zones de saisie, à cause de l'image, la comparaison échoue pour la différence de pixels. Vous pouvez donc ignorer l'option caret pour désactiver l'ignorance de ces différences.
