Overview

The Image Comparison with Resemble.js component enables advanced image comparison capabilities within OutSystems applications. Leveraging the Resemble.js library, this component performs client-side image comparisons and provides detailed metrics on the differences between two images.

Features

• Client-Side Image Comparison: Reduces server load by performing comparisons in the browser.
• Detailed Comparison Data: Provides metrics such as IsSame, dimension differences, RawMisMatchPercentage, MisMatchPercentage, DiffBounds, and AnalysisTime.
• Easy Integration: Consists of one action and one web block, making it simple to integrate.

Installation

1. Download and Install: Obtain the component from OutSystems Forge and install it into your environment.
2. Reference in Module: Add the component to your application by referencing it in the module where you want to perform image comparisons.

Usage

Web Block :-

1. Drag and Drop: Add the "ResembleBlock" WebBlock to your screen or web block where image comparison is needed.

Action :-

1. Action Name: Compare
2. Inputs:
   • FileOne (Binary , Text): The first image and image name.
   • FileTwo (Binary , Text): The second image and image name.
   • Options (Structure): Options to customize the comparison (e.g., "ignoreColors: true").
3. Outputs:
   • ComparedImage (Binary): The resulting image highlighting differences.
   • Data (Structure): A record containing detailed comparison metrics:
     • IsSame (Boolean): Whether the images are identical.
     • DimensionDifference (Structure): Differences in dimensions.
     • RawMisMatchPercentage (Decimal): Raw mismatch percentage.
     • MisMatchPercentage (Decimal): Adjusted mismatch percentage.
     • DiffBounds (Structure): Bounding box of differing areas.
     • AnalysisTime (Integer): Time taken for the comparison.