# rsmbl/resemble.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rsmbl-resemble-js).**

4,608 stars · 422 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/rsmbl/Resemble.js
- Homepage: http://rsmbl.github.io/Resemble.js/
- awesome-repositories: https://awesome-repositories.com/repository/rsmbl-resemble-js.md

## Description

Resemble.js is a JavaScript image comparison library and pixel-based visual regression tool. It functions as an image analysis engine that calculates the percentage of visual difference between two images and generates a diff image to highlight mismatched areas.

The library utilizes a canvas-based approach to identify differences, providing capabilities for automated image comparison and UI component validation. It includes specialized filtering to reduce false positives by ignoring visual noise such as antialiasing and specific colors.

The toolset covers image dimension normalization, analysis region definition through bounding-box exclusion, and the extraction of image composition metrics including color distribution, brightness, and alpha channel data.

## Tags

### Graphics & Multimedia

- [Image Comparison Libraries](https://awesome-repositories.com/f/graphics-multimedia/image-comparison-libraries.md) — Provides a library for quantifying and visualizing differences between image data buffers.
- [Canvas-Based Image Diffing Tools](https://awesome-repositories.com/f/graphics-multimedia/canvas-based-image-diffing-tools.md) — Identifies mismatched areas between images using an HTML5 Canvas approach to highlight differences.
- [Canvas-Based Image Processors](https://awesome-repositories.com/f/graphics-multimedia/canvas-based-image-processors.md) — Utilizes the HTML5 Canvas API to extract raw RGBA pixel data and render visual difference maps.
- [Difference Map Generation](https://awesome-repositories.com/f/graphics-multimedia/difference-map-generation.md) — Generates a visual difference map by mapping mismatched pixels to a specific error color and transparency.
- [Image Composition Analysis Engines](https://awesome-repositories.com/f/graphics-multimedia/image-composition-analysis-engines.md) — Extracts color distribution, brightness, and alpha channel data from image files.
- [Visual Difference Analyzers](https://awesome-repositories.com/f/graphics-multimedia/visual-difference-analyzers.md) — Analyzes two images to produce a spatial map and a percentage of where they differ most. ([source](https://github.com/rsmbl/resemble.js#readme))
- [Visual Noise Filters](https://awesome-repositories.com/f/graphics-multimedia/visual-noise-filters.md) — Implements specialized filtering to ignore antialiasing and specific colors to reduce false positives in visual regression tests. ([source](https://github.com/rsmbl/Resemble.js/blob/master/index.html))
- [Anti-Aliasing Detection](https://awesome-repositories.com/f/graphics-multimedia/anti-aliasing-techniques/anti-aliasing-detection.md) — Provides logic to detect and ignore pixel shifts caused by font smoothing to reduce false positives.
- [Comparison Region Exclusions](https://awesome-repositories.com/f/graphics-multimedia/comparison-region-exclusions.md) — Allows ignoring specific coordinate ranges during comparison to prevent certain regions from affecting error percentages.
- [Comparison Region Isolation](https://awesome-repositories.com/f/graphics-multimedia/comparison-region-isolation.md) — Restricts image analysis to specific coordinate-based bounding boxes to exclude irrelevant areas. ([source](https://github.com/rsmbl/Resemble.js/blob/master/index.html))
- [Image Analysis Masks](https://awesome-repositories.com/f/graphics-multimedia/image-analysis-masks.md) — The product prevents specific regions or colors from being analyzed by defining bounding boxes or color-based masks. ([source](https://github.com/rsmbl/resemble.js#readme))
- [Image Dimension Standardizations](https://awesome-repositories.com/f/graphics-multimedia/image-dimension-standardizations.md) — Ensures images adhere to consistent pixel dimensions to allow for accurate pixel-by-pixel comparison. ([source](https://github.com/rsmbl/Resemble.js/blob/master/index.html))
- [Image Scaling](https://awesome-repositories.com/f/graphics-multimedia/image-output-configurations/image-scaling.md) — Resizes a secondary image to match the dimensions of the primary image for accurate pixel analysis.

### Testing & Quality Assurance

- [Pixel-Level Image Comparison](https://awesome-repositories.com/f/testing-quality-assurance/pixel-level-image-comparison.md) — Iterates through image coordinate grids to calculate mathematical differences between corresponding color values.
- [Visual Regression Testing](https://awesome-repositories.com/f/testing-quality-assurance/visual-regression-testing.md) — Detects unintended UI changes by comparing images and generating diff maps for automated testing.
- [Pixel-Matching Analysis](https://awesome-repositories.com/f/testing-quality-assurance/visual-regression-testing/pixel-matching-analysis.md) — Detects structural changes in images by comparing pixels and applying mismatch thresholds.
- [Dimension Normalization](https://awesome-repositories.com/f/testing-quality-assurance/pixel-level-image-comparison/dimension-normalization.md) — Scales and normalizes image dimensions to ensure accurate pixel-by-pixel comparison between assets.
- [UI Component Visual Validation](https://awesome-repositories.com/f/testing-quality-assurance/ui-component-visual-validation.md) — Verifies that a user interface looks correct by comparing current screenshots against baseline images in a browser.

### Artificial Intelligence & ML

- [Color Composition Analysis](https://awesome-repositories.com/f/artificial-intelligence-ml/image-content-analyzers/color-composition-analysis.md) — Extracts image composition metrics including color distributions for red, green, blue, brightness, and alpha channels. ([source](https://github.com/rsmbl/Resemble.js/blob/master/index.html))

### Part of an Awesome List

- [Image Processing](https://awesome-repositories.com/f/awesome-lists/media/image-processing.md) — Analyzes and compares images.