Comparer deux Images en JavaScript
j'essaie de déterminer si deux images sont identiques en javascript (même si les urls src sont différentes).
mon cas d'utilisation spécifique est dans une extension chrome (bien que ce soit une extension chrome n'entre pas vraiment en ligne de compte dans la question). Je peux obtenir l'imgage d'un PNG favicon stocké dans la base de données interne de chrome en paramétrant l'img src:
'chrome://favicon/'+url dont l'url est l'url du site web. Cependant, je veux maintenant trouver tous les favicons uniques. Étant donné qu'ils auront tous une URL différente de la base de données interne, y a-t-il un moyen facile de comparer des images en javascript?
Merci
4 réponses
Non, il n'est pas particulièrement facile façon de le faire. JavaScript n'a pas été conçu pour traiter des opérations de bas niveau telles que travailler directement avec des données binaires pour, par exemple, le traitement d'image.
vous pouvez utiliser un <canvas> élément pour base64 Encoder chaque image , puis comparer le résultat base64 chaînes, mais cela ne vous indiquera si oui ou non les images sont identiques.
pour utiliser la fonction getBase64Image (définie dans la réponse que j'ai liée) pour comparer deux images:
var a = new Image(),
b = new Image();
a.src = 'chrome://favicon/' + url_a;
b.src = 'chrome://favicon/' + url_b;
// might need to wait until a and b have actually loaded, ignoring this for now
var a_base64 = getBase64Image(a),
b_base64 = getBase64Image(b);
if (a_base64 === b_base64)
{
// they are identical
}
else
{
// you can probably guess what this means
}
je pense que vous pourriez être intéressé par cette bibliothèque JavaScript appelé ressembler.js qui:
analyse et compare les images avec la toile HTML5 et JavaScript.
ressemble.js peut être utilisé pour toute analyse d'image et de comparaison d'exigences que vous pourriez avoir dans le navigateur. Cependant, il a été conçu et construit pour être utilisé par le https://github.com/Huddle/PhantomCSS powered visuelle de régression de la bibliothèque PhantomCSS. PhantomCSS doit pouvoir ignorer antialiasing car cela pourrait causer des différences entre les screenshots dérivés de différentes machines.
ressemble.js utilise L'API de fichier HTML5 pour analyser les données d'image, et canvas pour le rendu des diffs d'image.
nous venons de sortir une bibliothèque légère RembrandtJS , qui fait exactement cela et cela fonctionne à la fois dans le navigateur en utilisant L'API Canvas2D HTML5 ainsi que sur le serveur via le noeud de dépôt.JS nœud de remplacement-toile. Il accepte à la fois les blobs et les urls comme sources d'image de sorte que vous pouvez simplement faire ceci:
const rembrandt = new Rembrandt({
// `imageA` and `imageB` can be either Strings (file path on node.js,
// public url on Browsers) or Buffers
imageA: 'chrome://favicon/' + url_a,
imageB: 'chrome://favicon/' + url_b,
thresholdType: Rembrandt.THRESHOLD_PERCENT,
// The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS
maxThreshold: 0,
// Maximum color delta (0...255):
maxDelta: 0,
// Maximum surrounding pixel offset
maxOffset: 0,
})
// Run the comparison
rembrandt.compare()
.then(function (result) {
if(result.passed){
// do what you want
}
})
comme vous pouvez le voir Rembrandt vous permet également d'introduire des valeurs seuils, si votre domaine nécessite une certaine marge de manœuvre en ce qui concerne la couleur ou différence de pixel. Depuis il fonctionne dans le navigateur et sur le serveur (nœud), il le rend facile à intégrer dans votre suite de tests.
peut-être cet outil aidera: https://github.com/HumbleSoftware/js-imagediff/