rsmbl/Resemble.js
Resemble.js
Resemble.js 是一个 JavaScript 图像比较库和基于像素的视觉回归工具。它作为一个图像分析引擎，计算两张图像之间的视觉差异百分比，并生成差异图以突出显示不匹配的区域。
该库利用基于 Canvas 的方法来识别差异，提供自动化图像比较和 UI 组件验证功能。它包含专门的过滤功能，通过忽略抗锯齿和特定颜色等视觉噪声来减少误报。
该工具集涵盖图像尺寸归一化、通过边界框排除定义分析区域，以及提取包括颜色分布、亮度和 Alpha 通道数据在内的图像组成指标。
Features
- Image Comparison Libraries - Provides a library for quantifying and visualizing differences between image data buffers.
- Canvas-Based Image Diffing Tools - Identifies mismatched areas between images using an HTML5 Canvas approach to highlight differences.
- Canvas-Based Image Processors - Utilizes the HTML5 Canvas API to extract raw RGBA pixel data and render visual difference maps.
- Difference Map Generation - Generates a visual difference map by mapping mismatched pixels to a specific error color and transparency.
- Image Composition Analysis Engines - Extracts color distribution, brightness, and alpha channel data from image files.
- Visual Difference Analyzers - Analyzes two images to produce a spatial map and a percentage of where they differ most.
- Visual Noise Filters - Implements specialized filtering to ignore antialiasing and specific colors to reduce false positives in visual regression tests.
- Pixel-Level Image Comparison - Iterates through image coordinate grids to calculate mathematical differences between corresponding color values.
- Visual Regression Testing - Detects unintended UI changes by comparing images and generating diff maps for automated testing.
- Pixel-Matching Analysis - Detects structural changes in images by comparing pixels and applying mismatch thresholds.
- Color Composition Analysis - Extracts image composition metrics including color distributions for red, green, blue, brightness, and alpha channels.
- Anti-Aliasing Detection - Provides logic to detect and ignore pixel shifts caused by font smoothing to reduce false positives.
- Comparison Region Exclusions - Allows ignoring specific coordinate ranges during comparison to prevent certain regions from affecting error percentages.
- Comparison Region Isolation - Restricts image analysis to specific coordinate-based bounding boxes to exclude irrelevant areas.
- Image Analysis Masks - The product prevents specific regions or colors from being analyzed by defining bounding boxes or color-based masks.
- Image Dimension Standardizations - Ensures images adhere to consistent pixel dimensions to allow for accurate pixel-by-pixel comparison.
- Image Scaling - Resizes a secondary image to match the dimensions of the primary image for accurate pixel analysis.
- Dimension Normalization - Scales and normalizes image dimensions to ensure accurate pixel-by-pixel comparison between assets.
- UI Component Visual Validation - Verifies that a user interface looks correct by comparing current screenshots against baseline images in a browser.
- Image Processing - Analyzes and compares images.
