Skip to content

Commit

Permalink
readme
Browse files Browse the repository at this point in the history
  • Loading branch information
munrocket committed Dec 23, 2024
1 parent 9d0bbf8 commit d1d0857
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 44 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

- Fix sdk dependency

## 1.1.0
## 1.1.1

- Utils for integration_testing
- Universal flutter and dart sdk package
56 changes: 14 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
# pixelmatch

Makes building multi-platform UIs a breeze. Small and fast diff image library with utils for integration/e2e testing.
Diff images on CPU. Small, fast pixel-level image comparison library for e2e testing.

## Motivation
## Features

I wanted to interact with Xcode and Android Studio much less, because it is possible to make screenshots in Github Actions CI with real iPhone/Android emulators. This is especially useful for thouse who don't have access to Apple/Android devices, FFI graphics libraries, UI/game testing and open source projects.
- Pixel-by-pixel image comparison
- Customizable threshold and colors for diff output
- Anti-aliasing detection
- Fast and memory efficient

| expected | actual | diff |
| --- | --- | --- |
| ![](test/fixtures/4a.png) | ![](test/fixtures/4b.png) | ![diff](test/fixtures/4diff.png) |

## Features
## Getting started

- Diff image comparison with customizable threshold, AA and colors for output.
- Workflow for iOS/Android/Web screenshot making in CI (PR welcome for other CI).
- Lightweight utils for cropping notch from iPhone, decoding and resizing images.
- Color difference based on [color science research](https://web.archive.org/web/20240414154638/http://riaa.uaem.mx/xmlui/bitstream/handle/20.500.12055/91/progmat222010Measuring.pdf) from the ported [mapbox](https://github.com/mapbox/pixelmatch) library.
Add library to your package and give Uint8List with RGBA canvas to it somehow.

## Usage

With Dart SDK it can be used in web, mobile and desktop. Like a diff library.

```dart
import 'package:pixelmatch/pixelmatch.dart';
import 'dart:typed_data';
Expand All @@ -38,42 +36,16 @@ void main() {
}
```

With Flutter SDK it can be used for integration_test. There are additional lightweight utils like readPng/writePng, imgToRgba/rgbaToImg, resizeImage, cropNotch, cropSides, with it you can make your own E2E/Integration workflow for host/cloud testing as shown in example.

```dart
import 'package:pixelmatch/pixelmatch.dart';
import 'package:pixelmatch/integration_utils.dart';
import 'dart:typed_data';
void main() {
final img1 = await readPng('screenshot/$name1.png');
final img2 = await readPng('screenshot/$name2.png');
final width = img1.width;
final height = img1.height;
final rgba1 = await imgToRgba(img1);
final rgba2 = await imgToRgba(img2);
final diff = Uint8List(width * height * 4);
// Compare images
final numDiffPixels = pixelmatch(rgba1, rgba2, diff, width, height, { 'threshold': 0.1 });
print('Found $numDiffPixels different pixels');
}
```

## This solves some issues in Flutter

- [Proposal: Make on-device testing awesome](https://github.com/flutter/flutter/issues/148028)
- [Add end-to-end integration test tests for all generators](https://github.com/flutter/flutter/issues/111505)
- [Missing matchesGoldenFile documentation](https://github.com/flutter/flutter/issues/103222)
- [Chromedriver resize bug with --browser-dimension](https://github.com/flutter/flutter/issues/136109)

## Pixelmatch options
#### Options

- `threshold` (default: 0.1): Matching threshold (0 to 1); smaller is more sensitive
- `includeAA` (default: false): Whether to skip anti-aliasing detection
- `alpha` (default: 0.1): Opacity of original image in diff output
- `aaColor` (default: [255, 255, 0]): Color of anti-aliased pixels in diff output
- `diffColor` (default: [255, 0, 0]): Color of different pixels in diff output
- `diffColorAlt` (default: null): Alternative color for dark on light differences
- `diffMask` (default: false): Draw the diff over a transparent background
- `diffMask` (default: false): Draw the diff over a transparent background

## Additional information

This is a Dart port of [mapbox/pixelmatch](https://github.com/mapbox/pixelmatch).
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: pixelmatch
description: Diff images on CPU. Small, fast pixel-level image comparison library for e2e testing.
version: 1.1.0
version: 1.1.1
repository: https://github.com/munrocket/pixelmatch

environment:
Expand Down

0 comments on commit d1d0857

Please sign in to comment.