### Complete Visual Regression Test Example Source: https://context7.com/rsmbl/resemble.js/llms.txt A comprehensive example demonstrating automated visual regression testing using Resemble.js. It includes options for output settings, scaling, and ignoring anti-aliasing, and saves a diff image if the test fails. ```javascript const compareImages = require("resemblejs/compareImages"); const fs = require("fs").promises; const path = require("path"); async function visualRegressionTest(baselinePath, currentPath, options = {}) { const defaultOptions = { output: { errorColor: { red: 255, green: 0, blue: 255 }, errorType: "movement", transparency: 0.3, largeImageThreshold: 1200 }, scaleToSameSize: true, ignore: "antialiasing" }; const config = { ...defaultOptions, ...options }; try { const [baseline, current] = await Promise.all([ fs.readFile(baselinePath), fs.readFile(currentPath) ]); const data = await compareImages(baseline, current, config); const result = { passed: parseFloat(data.misMatchPercentage) < (options.threshold || 1), misMatchPercentage: data.misMatchPercentage, isSameDimensions: data.isSameDimensions, dimensionDifference: data.dimensionDifference, diffBounds: data.diffBounds, analysisTime: data.analysisTime }; // Save diff image if test failed if (!result.passed) { const diffPath = currentPath.replace(/\.\w+$/, "-diff.png"); await fs.writeFile(diffPath, data.getBuffer()); result.diffImagePath = diffPath; } return result; } catch (error) { return { passed: false, error: error.message }; } } // Usage async function runTests() { const result = await visualRegressionTest( "./baselines/homepage.png", "./screenshots/homepage.png", { threshold: 0.5 } ); if (result.passed) { console.log("✓ Visual test passed"); } else { console.log("✗ Visual test failed"); console.log(" Mismatch:", result.misMatchPercentage + "%"); console.log(" Diff saved to:", result.diffImagePath); } } runTests(); ``` -------------------------------- ### Retrieve Basic Image Analysis Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Use this to get basic analysis data for an image. Ensure 'fileData' is properly loaded. ```javascript var api = resemble(fileData).onComplete(function (data) { console.log(data); /* { red: 255, green: 255, blue: 255, brightness: 255 } */ }); ``` -------------------------------- ### Build Docker Image Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Builds a Docker image for Resemble.js using the provided Dockerfile. ```bash docker build -t rsmbl/resemble . ``` -------------------------------- ### Run Node.js Tests Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Command to execute the tests for Resemble.js in a Node.js environment using npm. ```bash npm run test ``` -------------------------------- ### Output Settings Configuration Source: https://context7.com/rsmbl/resemble.js/llms.txt Configure global output settings including error pixel color, error type visualization, transparency, and performance thresholds. ```javascript const resemble = require("resemblejs"); // Configure global output settings resemble.outputSettings({ errorColor: { red: 255, green: 0, blue: 255, alpha: 255 }, errorType: "movement", // Options: "flat", "movement", "flatDifferenceIntensity", "movementDifferenceIntensity", "diffOnly" transparency: 0.3, // Transparency of original image in diff (0-1) largeImageThreshold: 1200, // Skip pixels for images larger than this (0 to disable) useCrossOrigin: false, // Set to false for Data URIs outputDiff: true }); resemble("image1.png") .compareTo("image2.png") .onComplete(function (data) { const diffUrl = data.getImageDataUrl(); // Diff image uses configured magenta error color with movement visualization }); ``` -------------------------------- ### Run Docker Container Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Runs the Docker container for Resemble.js, typically used for testing. ```bash docker run rsmbl/resemble ``` -------------------------------- ### Compare Images with Options (Callback API) Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Uses the 'resemble.compare' function with options for comparison, including 'returnEarlyThreshold'. Requires 'resemblejs' to be required. ```javascript const compare = require("resemblejs").compare; function getDiff() { const options = { returnEarlyThreshold: 5 }; compare(image1, image2, options, function (err, data) { if (err) { console.log("An error!"); } else { console.log(data); } }); } ``` -------------------------------- ### Retrieve basic image analysis Source: https://github.com/rsmbl/resemble.js/blob/master/index.html Performs basic analysis on a single image file and returns color and brightness data in the completion callback. ```javascript var api = resemble(fileData).onComplete(function(data){ return data; /* { red: 100, green: 100, blue: 100, brightness: 100, alpha: 100, white: 100, black: 100 } */ }); ``` -------------------------------- ### Compare images using callback API Source: https://context7.com/rsmbl/resemble.js/llms.txt Uses the resemble.compare convenience function for callback-style comparisons with custom configuration. ```javascript const { compare } = require("resemblejs"); const options = { returnEarlyThreshold: 5, // Stop comparing when mismatch exceeds 5% scaleToSameSize: true, ignore: "antialiasing", output: { errorColor: { red: 0, green: 255, blue: 0 }, errorType: "flat", transparency: 0.5 } }; compare("image1.png", "image2.png", options, function (err, data) { if (err) { console.error("Error:", err); return; } console.log("Mismatch:", data.misMatchPercentage); console.log("Same dimensions:", data.isSameDimensions); console.log("Diff bounds:", data.diffBounds); }); ``` -------------------------------- ### Set Global Output Settings Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Configures global output settings for Resemble.js. This affects all subsequent comparisons. Note that this mutates global state. ```javascript resemble.outputSettings({ errorColor: { red: 255, green: 0, blue: 255 }, errorType: "movement", transparency: 0.3, largeImageThreshold: 1200, useCrossOrigin: false, outputDiff: true }); // .repaint(); ``` -------------------------------- ### Compare Images Using Data URIs Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Resemble.js supports Data URIs. Ensure 'useCrossOrigin' is set to false if using Data URIs. ```javascript resemble.outputSettings({ useCrossOrigin: false }); var diff = resemble("data:image/jpeg;base64,/9j/4AAQSkZJRgAB...").compareTo("data:image/jpeg;base64,/9j/,/9j/4AAQSkZJRg..."); ``` -------------------------------- ### Analyze single image color and brightness Source: https://context7.com/rsmbl/resemble.js/llms.txt Retrieves color composition and brightness metrics for a single image file. ```javascript const resemble = require("resemblejs"); // Analyze a single image resemble("path/to/image.jpg").onComplete(function (data) { console.log(data); // Output: // { // red: 65, // Average red percentage (0-100) // green: 72, // Average green percentage (0-100) // blue: 58, // Average blue percentage (0-100) // alpha: 0, // Average transparency percentage // brightness: 68, // Average brightness percentage // white: 12, // Percentage of white pixels // black: 3 // Percentage of black pixels // } }); ``` -------------------------------- ### Perform promise-based comparison in Node.js Source: https://context7.com/rsmbl/resemble.js/llms.txt Uses the compareImages function with async/await for asynchronous image comparison and file output. ```javascript const compareImages = require("resemblejs/compareImages"); const fs = require("fs"); async function runComparison() { const options = { output: { errorColor: { red: 255, green: 0, blue: 255 }, errorType: "movement", transparency: 0.3, largeImageThreshold: 1200, useCrossOrigin: false, outputDiff: true }, scaleToSameSize: true, ignore: "antialiasing" }; try { const data = await compareImages( fs.readFileSync("./image1.png"), fs.readFileSync("./image2.png"), options ); console.log("Mismatch:", data.misMatchPercentage + "%"); console.log("Same dimensions:", data.isSameDimensions); // Save the diff image to a file await fs.promises.writeFile("./diff-output.png", data.getBuffer()); // Include original images alongside diff await fs.promises.writeFile("./diff-with-originals.png", data.getBuffer(true)); } catch (error) { console.error("Comparison failed:", error); } } runComparison(); ``` -------------------------------- ### Compare Images with Options (Node.js Promise API) Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Compares images using the promise-based 'compareImages' function in Node.js. Requires 'resemblejs/compareImages' and 'mz/fs'. ```javascript const compareImages = require("resemblejs/compareImages"); const fs = require("mz/fs"); async function getDiff() { const options = { output: { errorColor: { red: 255, green: 0, blue: 255 }, errorType: "movement", transparency: 0.3, largeImageThreshold: 1200, useCrossOrigin: false, outputDiff: true }, scaleToSameSize: true, ignore: "antialiasing" }; const data = await compareImages(await fs.readFile("./your-image-path/People.jpg"), await fs.readFile("./your-image-path/People2.jpg"), options); await fs.writeFile("./output.png", data.getBuffer()); } getDiff(); ``` -------------------------------- ### Compare two images Source: https://github.com/rsmbl/resemble.js/blob/master/index.html Compares two image files and returns the mismatch percentage and dimension status in the completion callback. ```javascript resemble(file).compareTo(file2).onComplete(function(){ return data; /* { misMatchPercentage : 100, // % isSameDimensions: true, // or false getImageDataUrl: function(){} } */ }); ``` -------------------------------- ### Compare two images for visual differences Source: https://context7.com/rsmbl/resemble.js/llms.txt Compares two images and returns mismatch statistics and a diff image URL. ```javascript const resemble = require("resemblejs"); resemble("path/to/image1.jpg") .compareTo("path/to/image2.jpg") .onComplete(function (data) { console.log("Same dimensions:", data.isSameDimensions); console.log("Mismatch percentage:", data.misMatchPercentage); console.log("Dimension difference:", data.dimensionDifference); console.log("Diff bounds:", data.diffBounds); console.log("Analysis time:", data.analysisTime, "ms"); // Output: // Same dimensions: true // Mismatch percentage: "8.66" // Dimension difference: { width: 0, height: 0 } // Diff bounds: { top: 58, left: 22, bottom: 431, right: 450 } // Analysis time: 245 ms // Get diff image as Data URL const diffImageUrl = data.getImageDataUrl(); }); ``` -------------------------------- ### Compare Two Images Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Compares two images and logs the differences. Use 'ignoreColors()' to skip color differences. ```javascript var diff = resemble(file) .compareTo(file2) .ignoreColors() .onComplete(function (data) { console.log(data); }); ``` -------------------------------- ### Compare Node.js Buffers Source: https://context7.com/rsmbl/resemble.js/llms.txt Perform image comparisons directly using Node.js file buffers. Allows generating diff buffers with or without original images. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); const buffer1 = fs.readFileSync("./image1.png"); const buffer2 = fs.readFileSync("./image2.png"); resemble(buffer1) .compareTo(buffer2) .ignoreAntialiasing() .onComplete(function (data) { console.log("Buffer comparison result:"); console.log("Same dimensions:", data.isSameDimensions); console.log("Mismatch:", data.misMatchPercentage); console.log("Diff bounds:", data.diffBounds); // Get diff as PNG buffer const diffBuffer = data.getBuffer(); fs.writeFileSync("./diff-output.png", diffBuffer); // Get diff with original images side by side const diffWithOriginals = data.getBuffer(true); fs.writeFileSync("./diff-with-originals.png", diffWithOriginals); }); ``` -------------------------------- ### Set Multiple Bounding Boxes for Comparison Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Allows specifying multiple rectangular areas for comparison using an array of box objects. ```javascript resemble.outputSettings({ boundingBoxes: [box1, box2] }); ``` -------------------------------- ### Set Bounding Box for Comparison Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Specifies a rectangular area (in pixels from top-left) for comparison. This setting is applied via outputSettings. ```javascript const box = { left: 100, top: 200, right: 200, bottom: 600 }; resemble.outputSettings({ boundingBox: box }); ``` -------------------------------- ### Comparison Mode Options Source: https://context7.com/rsmbl/resemble.js/llms.txt Control the strictness of comparison using various ignore modes. ```javascript const resemble = require("resemblejs"); // Strict comparison - zero tolerance resemble(image1) .compareTo(image2) .ignoreNothing() .onComplete(function (data) { console.log("Strict comparison:", data.misMatchPercentage); }); // Default tolerance (16 for RGB/alpha) resemble(image1) .compareTo(image2) .ignoreLess() .onComplete(function (data) { console.log("Less strict:", data.misMatchPercentage); }); // Ignore alpha channel completely resemble(image1) .compareTo(image2) .ignoreAlpha() .onComplete(function (data) { console.log("Ignoring alpha:", data.misMatchPercentage); }); ``` -------------------------------- ### Compare Data URIs and Base64 Source: https://context7.com/rsmbl/resemble.js/llms.txt Compare images provided as base64-encoded strings. Ensure cross-origin settings are disabled for Data URIs. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); // Convert files to base64 Data URIs const image1Base64 = `data:image/jpeg;base64,${fs.readFileSync("./image1.jpg", "base64")}`; const image2Base64 = `data:image/jpeg;base64,${fs.readFileSync("./image2.jpg", "base64")}`; // Important: Disable cross-origin for Data URIs resemble.outputSettings({ useCrossOrigin: false }); resemble(image1Base64) .compareTo(image2Base64) .onComplete(function (data) { console.log("Base64 comparison result:"); console.log("Mismatch:", data.misMatchPercentage); console.log("Diff bounds:", data.diffBounds); }); ``` -------------------------------- ### Scale Second Image to Same Size Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Scales the second image to match the dimensions of the first image for comparison. ```javascript diff.scaleToSameSize(); ``` -------------------------------- ### Generate Diff Image Output Source: https://context7.com/rsmbl/resemble.js/llms.txt Generates diff images as Data URLs or PNG buffers. Supports adding labels to diff images and including original images in the output buffer. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); resemble("image1.png") .compareTo("image2.png") .onComplete(function (data) { // Get diff as Data URL (works in browser and Node.js) const diffDataUrl = data.getImageDataUrl(); // Get diff with a label/title const labeledDiffUrl = data.getImageDataUrl("Comparison: v1 vs v2"); // In Node.js: Get diff as PNG buffer const diffBuffer = data.getBuffer(); fs.writeFileSync("./diff.png", diffBuffer); // Get diff with original images included (3 images side by side) const combinedBuffer = data.getBuffer(true); fs.writeFileSync("./combined-diff.png", combinedBuffer); }); ``` -------------------------------- ### Set Early Return Threshold Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Configures the comparison to return early if the difference exceeds a specified threshold. The threshold is a value between 0 and 1. ```javascript resemble(img1) .compareTo(img2) .setReturnEarlyThreshold(8) .onComplete((data) => { /* do something */ }); ``` -------------------------------- ### Ignore Colors in Image Comparison Source: https://context7.com/rsmbl/resemble.js/llms.txt Compare images based on brightness only, ignoring color differences. Useful for comparing images where color variations are expected but structural content should match. ```javascript const resemble = require("resemblejs"); resemble("image1.jpg") .compareTo("image2.jpg") .ignoreColors() .onComplete(function (data) { console.log("Mismatch (brightness only):", data.misMatchPercentage); // Compares grayscale brightness values only }); ``` -------------------------------- ### Return Early Threshold Source: https://context7.com/rsmbl/resemble.js/llms.txt Stop image comparison once a mismatch percentage threshold is reached to improve performance. ```javascript const resemble = require("resemblejs"); // Fluent API with return early resemble("image1.png") .compareTo("image2.png") .setReturnEarlyThreshold(8) // Stop if mismatch exceeds 8% .onComplete(function (data) { console.log("Mismatch:", data.misMatchPercentage); // If images differ by more than 8%, result will be "8.00" }); // Using compareImages with returnEarlyThreshold const compareImages = require("resemblejs/compareImages"); async function quickCheck() { const data = await compareImages( "./image1.png", "./image2.png", { returnEarlyThreshold: 5 } ); if (parseFloat(data.misMatchPercentage) >= 5) { console.log("Images differ significantly (>5%)"); } else { console.log("Images are similar, mismatch:", data.misMatchPercentage); } } ``` -------------------------------- ### Ignore Antialiasing in Image Comparison Source: https://context7.com/rsmbl/resemble.js/llms.txt Configure comparison to ignore antialiasing differences, which is useful when comparing images rendered on different systems or with different font rendering. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); const image1 = fs.readFileSync("./text-normal.png"); const image2 = fs.readFileSync("./text-antialiased.png"); resemble(image1) .compareTo(image2) .ignoreAntialiasing() .onComplete(function (data) { console.log("Mismatch (ignoring antialiasing):", data.misMatchPercentage); // Result: "0.00" - differences are ignored }); // Without ignoring antialiasing resemble(image1) .compareTo(image2) .onComplete(function (data) { console.log("Mismatch (strict):", data.misMatchPercentage); // Result: "5.19" - antialiasing detected as differences }); ``` -------------------------------- ### Configure Error Type Visualization Modes Source: https://context7.com/rsmbl/resemble.js/llms.txt Configures how difference pixels are rendered in the diff image using different error type modes. Each mode affects the appearance of differences, from solid colors to intensity-based blending. ```javascript const resemble = require("resemblejs"); // "flat" - Solid error color for all differences resemble.outputSettings({ errorType: "flat", errorColor: { red: 255, green: 0, blue: 255 } }); // "movement" - Blends error color with second image pixels resemble.outputSettings({ errorType: "movement", errorColor: { red: 255, green: 0, blue: 0 } }); // "flatDifferenceIntensity" - Error color with alpha based on difference intensity resemble.outputSettings({ errorType: "flatDifferenceIntensity", errorColor: { red: 0, green: 255, blue: 0 } }); // "movementDifferenceIntensity" - Movement blend with intensity-based alpha resemble.outputSettings({ errorType: "movementDifferenceIntensity", errorColor: { red: 255, green: 255, blue: 0 } }); // "diffOnly" - Shows only the second image's pixels where differences occur resemble.outputSettings({ errorType: "diffOnly" }); resemble("image1.png") .compareTo("image2.png") .onComplete(function (data) { const diffBuffer = data.getBuffer(); // Diff image rendered with configured error visualization }); ``` -------------------------------- ### Ignore Areas by Color Source: https://context7.com/rsmbl/resemble.js/llms.txt Mask specific areas of an image for comparison based on a reference color. Requires a reference image containing the mask. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); // Create a reference image with red (255,0,0) marking areas to ignore resemble.outputSettings({ ignoreAreasColoredWith: { r: 255, g: 0, b: 0, a: 255 } }); const referenceWithMask = fs.readFileSync("./image-with-red-mask.png"); const compareImage = fs.readFileSync("./image-to-compare.png"); resemble(compareImage) .compareTo(referenceWithMask) .onComplete(function (data) { console.log("Mismatch (excluding red areas):", data.misMatchPercentage); const diffBuffer = data.getBuffer(); fs.writeFileSync("./masked-diff.png", diffBuffer); }); ``` -------------------------------- ### Limit Comparison Area with Bounding Boxes Source: https://context7.com/rsmbl/resemble.js/llms.txt Restrict comparison to specific rectangular regions of the images using bounding boxes. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); // Single bounding box resemble.outputSettings({ boundingBox: { left: 80, top: 80, right: 130, bottom: 130 } }); resemble(fs.readFileSync("./image1.png")) .compareTo(fs.readFileSync("./image2.png")) .onComplete(function (data) { console.log("Mismatch in bounded area:", data.misMatchPercentage); }); // Multiple bounding boxes resemble.outputSettings({ boundingBoxes: [ { left: 20, top: 20, right: 350, bottom: 80 }, { left: 20, top: 200, right: 350, bottom: 250 } ] }); resemble(image1) .compareTo(image2) .onComplete(function (data) { console.log("Mismatch in multiple areas:", data.misMatchPercentage); }); ``` -------------------------------- ### Ignore Antialiasing in Comparison Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Modifies the comparison to ignore antialiasing artifacts. Call this after an initial analysis. ```javascript diff.ignoreAntialiasing(); ``` -------------------------------- ### Disable Large Image Threshold Source: https://github.com/rsmbl/resemble.js/blob/master/README.md By default, comparison skips pixels for images larger than 1200px to mitigate performance issues. Set 'largeImageThreshold' to 0 to disable this. ```javascript resemble.outputSettings({ largeImageThreshold: 0 }); ``` -------------------------------- ### Exclude Regions from Comparison Source: https://context7.com/rsmbl/resemble.js/llms.txt Define rectangular regions to ignore during image comparison. Supports both single and multiple ignored boxes. ```javascript const resemble = require("resemblejs"); const fs = require("fs"); // Single ignored box resemble.outputSettings({ ignoredBox: { left: 20, top: 20, right: 350, bottom: 80 } }); // Multiple ignored boxes resemble.outputSettings({ ignoredBoxes: [ { left: 20, top: 20, right: 350, bottom: 80 }, // Header region { left: 20, top: 200, right: 350, bottom: 250 } // Footer region ] }); resemble(fs.readFileSync("./screenshot1.png")) .compareTo(fs.readFileSync("./screenshot2.png")) .onComplete(function (data) { console.log("Mismatch (excluding ignored regions):", data.misMatchPercentage); }); ``` -------------------------------- ### Exclude Multiple Areas by Bounding Box Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Allows specifying multiple rectangular areas to be excluded from comparison using an array of box objects. ```javascript resemble.outputSettings({ ignoredBoxes: [box1, box2] }); ``` -------------------------------- ### Exclude Area by Bounding Box Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Defines a rectangular area (in pixels from top-left) to be excluded from the comparison. This is set via outputSettings. ```javascript const box = { left: 100, top: 200, right: 200, bottom: 600 }; resemble.outputSettings({ ignoredBox: box }); ``` -------------------------------- ### Exclude Areas Colored With Specific Color Source: https://github.com/rsmbl/resemble.js/blob/master/README.md Pixels matching the specified RGBA color in the reference image will be excluded from comparison. This is set via outputSettings. ```javascript const color = { r: 255, g: 0, b: 0, a: 255 }; resemble.outputSettings({ ignoreAreasColoredWith: color }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.