API JavaScript de código abierto para comparar imágenes
La biblioteca de JavaScript permite a los programadores de software comparar dos imágenes en múltiples entornos como Node o navegadores, etc.
A veces se requiere comparar dos imágenes para ver qué tan similares son. Es un proceso muy complicado y requiere buenos conocimientos para llevarlo a cabo. La biblioteca de código abierto de coincidencia de píxeles puede ser una opción muy útil para comparar dos imágenes en cualquier entorno. Como la biblioteca no tiene dependencias y funciona en matrices de datos de imagen sin procesar, puede usarse en múltiples entornos como Node o navegadores, etc.
Pixelmatch es muy pequeño en tamaño y muy simple de usar, pero es una biblioteca de comparación de imágenes a nivel de píxel muy rápida. Está escrito en JavaScript y creado inicialmente para comparar capturas de pantalla en pruebas. La biblioteca admite funciones como detección de píxeles suavizados y métricas de diferencia de color perceptual.
La detección de suavizado es una característica muy útil porque, por lo general, se ha observado que la representación de los mismos datos en diferentes aplicaciones, dispositivos o sistemas operativos puede generar resultados ligeramente diferentes. Pero sobre todo se recomienda ignorar estas pequeñas diferencias o pruebas para capturar datos más significativos.
Primeros pasos con la combinación de píxeles
La forma recomendada de instalar pixelmatch es a través de NPM. Utilice el siguiente comando para instalarlo.
Instalar pixelmatch a través de NPM
npm install pixelmatch ¿Qué es la prueba de coincidencia de píxeles?
Si necesita comparar dos imágenes para verificar si hay alguna diferencia entre ellas, puede usar la prueba de coincidencia de píxeles para este propósito. Puede haber dos tipos de imágenes, la imagen original y la modificada imagen. Puede usar una aplicación que pueda obtener imágenes de la captura de pantalla de su aplicación y luego, la biblioteca de comparación de imágenes se puede usar para comparar estas imágenes y mostrar los resultados.
Comparación de imágenes a través de la biblioteca de JavaScript
La biblioteca de código abierto pixelmatch ha proporcionado una funcionalidad completa para comparar imágenes dentro de aplicaciones JavaScript con facilidad. Los desarrolladores de software deben proporcionar datos de imagen para comparar, así como el lugar de salida donde deben escribir los datos de imagen con las diferencias. También deben proporcionar la dimensión, que es el ancho y el alto de las tres imágenes. Puede usar la opción de umbral que permite que las imágenes sean ligeramente diferentes, lo que puede ser excelente en algunos casos. Tenga en cuenta que la biblioteca de coincidencia de píxeles necesita que las imágenes sean del mismo tamaño.
Imágenes Comparación en línea vía 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 imágenes en Node.js a través de 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));
