API JavaScript de código aberto para comparar imagens
A biblioteca JavaScript permite que os programadores de software comparem duas imagens em vários ambientes, como Node ou navegadores, etc.
Às vezes é necessário comparar duas imagens para ver quão semelhantes elas são. É um processo muito complicado e requer um bom conhecimento para realizá-lo. A biblioteca pixelmatch de código aberto pode ser uma opção muito útil para comparar duas imagens em qualquer ambiente. Como a biblioteca não possui dependências e funciona em matrizes de dados de imagem com tipagem bruta, pode ser usada em vários ambientes, como Node ou navegadores, etc.
O pixelmatch é muito pequeno em tamanho e muito simples de usar, mas é uma biblioteca de comparação de imagens em nível de pixel muito rápida. Ele é escrito em JavaScript e criado inicialmente para comparar capturas de tela em testes. A biblioteca suporta recursos como detecção de pixels com suavização de serrilhado e métricas de diferença de cor perceptível.
A detecção de anti-aliasing é um recurso muito útil porque geralmente se observa que renderizar os mesmos dados em diferentes aplicativos, dispositivos ou sistemas operacionais pode gerar resultados ligeiramente diferentes. Mas principalmente é recomendado ignorar essas pequenas diferenças ou testes para capturar dados mais significativos.
Introdução ao pixelmatch
A maneira recomendada de instalar o pixelmatch é via NPM. Por favor, use o seguinte comando para instalá-lo.
Instale o pixelmatch via NPM
npm install pixelmatch O que é o teste de correspondência de pixel?
Se você precisar comparar duas imagens para verificar se há alguma diferença entre elas, poderá usar o teste de correspondência de pixels para essa finalidade. Pode haver dois tipos de imagens, a imagem original e a modificada imagem. Você pode usar um aplicativo que pode buscar imagens da captura de tela do seu aplicativo e depois disso, a biblioteca de comparação de imagens pode ser usada para comparar essas imagens e exibir os resultados.
Comparando imagens via biblioteca JavaScript
A biblioteca de código aberto pixelmatch fornece funcionalidade completa para comparar imagens dentro de aplicativos JavaScript com facilidade. Os desenvolvedores de software precisam fornecer dados de imagem para comparação, bem como o local de saída onde precisam gravar os dados de imagem com as diferenças. Eles também precisam fornecer a dimensão que é a largura e a altura das três imagens. Você pode usar a opção de limite que permite que as imagens sejam ligeiramente diferentes, o que pode ser ótimo em alguns casos. Observe que a biblioteca pixelmatch precisa que as imagens tenham os mesmos tamanhos.
Comparação de imagens Online através de 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);
Comparar imagens em Node.js via 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));
