rsmbl/resemble.js

Resemble.js is a JavaScript library for comparing two images and measuring the differences between them. You point it at two image files, and it produces a report showing what percentage of pixels differ, along with an output image where the differing areas are highlighted in a configurable color. The most common use case is automated visual testing, where you want to confirm that a web page or interface still looks the same after code changes. You compare a reference screenshot against a new one and fail the test if the difference exceeds a threshold you set. The library supports several comparison modes: you can ignore colors entirely and compare only structure, ignore anti-aliasing (the smoothing effect on edges that often causes false matches), or limit the comparison to a specific rectangular area within the image. It works both in a web browser using the HTML5 Canvas API and in Node.js, the server-side JavaScript runtime, through a dependency called node-canvas. The README notes that node-canvas is a pre-built binary that can fail in certain environments and gives specific troubleshooting options if the install does not work. The API is straightforward. You load two images, chain options onto the comparison call, and receive results in a callback or as a promise depending on which interface you use. Output settings like the highlight color, transparency of the diff overlay, and thresholds for skipping large images are all adjustable. The project is described as in "ultra low-maintenance mode," meaning the author responds to issues and contributions only once or twice a year. It is released under the MIT license, which allows free use in commercial and open-source projects. It was originally created by James Cryer and the Huddle development team.