API JavaScript para comparar imagens PNG
Biblioteca JavaScript de código aberto que suporta a comparação de imagens PNG dentro de aplicativos JavaScript. Ele suporta comparar imagens PNG ignorando antialiasing e ignorando acento circunflexo.
Comparar imagens com imagens usando JavaScript pode ser bastante difícil e desafiador. Escolher a ferramenta errada também pode influenciar muito o desempenho. LooksSame é uma biblioteca JavaScript de código aberto que inclui funcionalidade para comparar imagens PNG dentro de aplicativos JavaScript e funcionará imediatamente em todas as máquinas. A biblioteca foi criada levando em consideração a percepção humana das cores. A biblioteca foi criada principalmente para as necessidades de testes de regressão visual para o utilitário Gemini.
Essa biblioteca permite que os desenvolvedores comparem rápida e facilmente a diferença entre duas imagens PNG com facilidade usando comandos JavaScript. Ele forneceu suporte para processamento de imagens PNG, fornecendo caminhos para os arquivos ou imagens dentro do buffer. O uso das configurações padrão identificará apenas a diferença perceptível e, se você precisar detectar alguma diferença específica, selecione a opção estrita.
A biblioteca fornece suporte para vários recursos importantes relacionados a comparações de imagens, como comparar imagens com ignorar acento circunflexo, comparar imagens com ignorar antialiasing, obter limites de diferenças, obter clusters de diferenças, criar imagens de diferenças, criar imagens de diferenças como buffer, comparar cores e muito mais.
Introdução ao LooksSame
A maneira recomendada de instalar o LooksSameis via NPM. Por favor, use o seguinte comando para instalá-lo.
Instale o LooksSame via NPM
npm install looks-same Compare imagens PNG dentro de aplicativos JavaScript
A biblioteca LooksSame oferece aos programadores de software a capacidade de comparar programaticamente suas imagens PNG usando Node.js. Você precisa fornecer o caminho correto para as imagens PNG ou buffer como parâmetro. Um exemplo simples de comparação de imagens pode ser fazer uma captura de tela do elemento DOM com a imagem e usar a biblioteca para compará-la com a imagem local. Você também pode usar RequestLogger para registrar uma solicitação para a imagem e comparar o corpo da resposta com o arquivo local usando o método Buffer.compare().
Comparar imagens NG via JavaScript API
var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
// equal will be true, if images looks the same
});
Compare imagens PNG ignorando o antialiasing
Cada imagem é composta de pixels e, ao comparar essas imagens, você compara a cor de cada pixel na imagem um com a cor do pixel no local correspondente da imagem. Portanto, no caso de alguns pixels serem diferentes, você pode dizer que as imagens não são correspondentes. Normalmente, o aliasing acontece quando a resolução de uma imagem é muito baixa para o processador renderizar corretamente linhas suaves. A técnica de anti-aliasing é aplicada para dar uma aparência mais suave e, assim, você obtém resultados de comparação diferentes por ambiente. Algumas imagens têm diferenças ao compará-las devido ao antialiasing. A biblioteca LooksSame lida com problemas de anti-aliasing ignorando alguns dos pixels em que o anti-aliasing provavelmente ocorreu. Essas diferenças serão ignoradas por padrão.
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.
Comparar Imagens 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);
Comparação de imagens ignorando acento circunflexo
A biblioteca gratuita LooksSame forneceu funcionalidade para ignorar o cursor nas caixas de entrada ao comparar duas imagens dentro de seus próprios aplicativos. O cursor de texto no elemento de entrada de texto é uma dor para tarefas de regressão visual porque está sempre piscando. Às vezes, ao comparar duas caixas de texto ou imagens de caixas de entrada, por causa do acento circunflexo da imagem, a comparação está falhando por diferença de pixel. Então você pode ignorar a opção de acento circunflexo para desabilitar ignorando tais diferenças.
