ImageComparator

ImageComparator is a Visual Studio Code extension that allows you to compare image changes in your Git repository. It supports comparing local changes against the latest commit, comparing changes between two specific Git commits, and comparing current images to their earliest versions.

Features

• Compare local image changes against the latest commit
• Compare image changes between two Git commits
• Compare current images to their earliest versions up to a specified commit
• Supports PNG and JPEG image formats
• Generates side-by-side image comparisons with highlighted differences
• Accessible via status bar buttons or commands
• Option to use an external image viewer for diff images

Local Image Comparison

Remote Image Comparison

Earliest Version Comparison

Installation

1. Open Visual Studio Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "ImageComparator"
4. Click Install

Usage

Compare Local Image Changes

1. Make changes to image files in your workspace
2. Click the " Compare Images Local Changes" icon in the status bar or run the "Compare Local Image Changes" command
3. View the generated comparison images in the opened panels or external viewer (if configured)

Compare Remote Image Changes

1. Copy the Git commit hash you want to compare
2. Click the " Compare Images Remote Changes" icon in the status bar or run the "Compare Remote Image Changes" command
3. View the generated comparison images in the opened panels or external viewer (if configured)

Compare to Earliest Version

1. Copy the Git commit hash you want to use as the starting point
2. Click the " Compare Images to Earliest Version" icon in the status bar or run the "Compare Images to Earliest Version" command
3. View the generated comparison images in the opened panels or external viewer (if configured)

This feature compares the current version of each image to its earliest version, starting from the specified commit and moving forward in history. If an image exists in the specified commit, that version is used for comparison. If not, the earliest version after the specified commit is used.

Requirements

• Visual Studio Code v1.91.0 or higher
• Git installed and configured in your workspace

Extension Settings

This extension contributes the following settings:

• imageComparator.useExternalViewer: Enable/disable the use of an external image viewer to display diff images (default: false).
• imageComparator.externalViewerCommand: Command to open diff images in an external viewer. Use {{firstDiffImage}} or {{diffImagesDirectory}} as placeholders (default: nomacs {{firstDiffImage}}).
• imageComparator.pixelmatchOptions.threshold: Matching threshold, ranges from 0 to 1. Smaller values make the comparison more sensitive (default: 0.1).
• imageComparator.pixelmatchOptions.includeAA: If true, disables detecting and ignoring anti-aliased pixels (default: false).
• imageComparator.pixelmatchOptions.alpha: Blending factor of unchanged pixels in the diff output. Ranges from 0 for pure white to 1 for original brightness (default: 0.1).
• imageComparator.pixelmatchOptions.aaColor: The color of anti-aliased pixels in the diff output in [R, G, B] format (default: [255, 255, 0]).
• imageComparator.pixelmatchOptions.diffColor: The color of differing pixels in the diff output in [R, G, B] format (default: [255, 0, 0]).

To configure these settings:

1. Open VS Code settings (File > Preferences > Settings)
2. Search for "Image Comparator"
3. Adjust the settings as needed

Example configuration for using an external viewer:

{
  "imageComparator.useExternalViewer": true,
  "imageComparator.externalViewerCommand": "nomacs {{firstDiffImage}}"
}

Known Issues

Please report any issues on the GitHub repository.

Release Notes

0.0.5

• Fixed overwriting diff files when sharing name, but different directory.

0.0.4

• Added file name to image comparison panel (title).
• Implemented cancellation.
• Exposed pixelmatch options to settings.
• Implemented progress indication.
• Reorganized code for better maintainability.
• Added centralized logging system.
• Implemented diff directory cleanup mechanism.

0.0.3

Added feature to use external viewer to display diff images

0.0.2

Added feature to compare current images to their earliest versions up to a specified commit

0.0.1

Initial release of ImageComparator

License

This project is licensed under the MIT License.