API de JavaScript para comparar imágenes PNG
Biblioteca JavaScript de código abierto que admite la comparación de imágenes PNG dentro de aplicaciones JavaScript. Admite la comparación de imágenes PNG ignorando el antialiasing e ignorando el signo de intercalación.
Comparar imágenes con imágenes usando JavaScript puede ser bastante difícil y desafiante. Elegir la herramienta incorrecta también puede influir en gran medida en el rendimiento. LooksSame es una biblioteca de JavaScript de código abierto que ha incluido la funcionalidad para comparar imágenes PNG dentro de las aplicaciones de JavaScript y funcionará de manera inmediata en todas las máquinas. La biblioteca se ha creado teniendo en cuenta la percepción humana del color. La biblioteca se creó principalmente para las necesidades de las pruebas de regresión visual para la utilidad Gemini.
Esta biblioteca permite a los desarrolladores comparar rápida y fácilmente la diferencia entre dos imágenes PNG con facilidad usando comandos de JavaScript. Ha brindado soporte para el procesamiento de imágenes PNG, ya sea proporcionando rutas a los archivos o imágenes dentro del búfer. El uso de la configuración predeterminada identificará solo la diferencia notable y, si necesita detectar alguna diferencia en particular, seleccione la opción estricta.
La biblioteca ha brindado soporte para varias características importantes relacionadas con las comparaciones de imágenes, como comparar imágenes ignorando el signo de intercalación, comparar imágenes ignorando el antialiasing, obtener límites de diferencias, obtener grupos de diferencias, crear imágenes de diferencias, crear imágenes de diferencias como un búfer, comparar colores y mucho mas.
Primeros pasos con LooksSame
La forma recomendada de instalar LooksSamees a través de NPM. Utilice el siguiente comando para instalarlo.
Instalar LooksSame a través de NPM
npm install looks-same Comparar imágenes PNG dentro de aplicaciones de JavaScript
La biblioteca LooksSame brinda a los programadores de software la capacidad de comparar mediante programación sus imágenes PNG utilizando Node.js. Debe proporcionar la ruta correcta a las imágenes PNG o al búfer como parámetro. Un ejemplo simple de comparación de imágenes puede ser tomar una captura de pantalla del elemento DOM con la imagen y usar la biblioteca para compararlo con la imagen local. También puede usar RequestLogger para registrar una solicitud de la imagen y comparar el cuerpo de la respuesta con el archivo local usando el método Buffer.compare().
Comparar las imágenes a través de 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 imágenes PNG ignorando el antialiasing
Cada imagen se compone de píxeles y, al comparar estas imágenes, compara el color de cada píxel en la imagen uno con el color del píxel en la ubicación correspondiente de la imagen. Entonces, en caso de que algunos píxeles sean diferentes, entonces puede decir que las imágenes no coinciden. Por lo general, el alias ocurre cuando la resolución de una imagen es muy baja para que el procesador procese correctamente las líneas suaves. La técnica de anti-aliasing se aplica para dar una apariencia más suave y así obtener diferentes resultados de comparación por entorno. Algunas imágenes tienen diferencias al compararlas debido al antialiasing. La biblioteca LooksSame se ocupa de los problemas de suavizado al ignorar algunos de los píxeles en los que es probable que se haya producido el suavizado. Estas diferencias serán ignoradas por defecto.
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 suavizado 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 suavizado issues by ignoring certain of the pixels where suavizado is likely to have occurred. These differences will be ignored by default.
Comparar imágenes por Ignorar Antialiasing Care vía 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);
Comparación de imágenes ignorando Caret
La biblioteca gratuita LooksSame ha proporcionado una funcionalidad para ignorar el signo de intercalación en los cuadros de entrada al comparar dos imágenes dentro de sus propias aplicaciones. El símbolo de intercalación de texto en el elemento de entrada de texto es una molestia para las tareas de regresión visual porque siempre parpadea. A veces, cuando se comparan dos cuadros de texto o imágenes de cuadros de entrada, debido a que la imagen da un signo de intercalación, la comparación falla por la diferencia de píxeles. Por lo tanto, puede ignorar la opción de intercalación para deshabilitar ignorar tales diferencias.
