How to compare two images and highlight the difference in new image in flutter?

Question

I am a flutter developer. My need is to compare two images and highlight the difference (between two images) in a new image in flutter?

Two images First image and Second image.

My requirement is to compare those images and highlight the difference region in another image Difference image. I am trying to achieve screenshot based UI testing in flutter and need to fail the test cases if there is any differences between two images.

Please find the below screenshots for reference.

Is there any package in flutter/dart to achieve the same output?

Thanks and regards,

Ashwin

Answer 1

A few months ago I read your question, and today I've just uploaded a package that do what you want.

import 'package:diff_image/diff_image.dart';

final FIRST_IMAGE = 'https://raw.githubusercontent.com/nicolashahn/diffimg/master/images/mario-circle-cs.png';
final SECOND_IMAGE = 'https://raw.githubusercontent.com/nicolashahn/diffimg/master/images/mario-circle-node.png';

num getDiff() async{
  try{
      var diff = await DiffImage.compareFromUrl(
            FIRST_IMAGE,
            SECOND_IMAGE,
            saveDiff:True
      );
      print('The difference between images is: $diff %');
      return diff;
  } catch(e){
      print(e);
  }
}

main() {
  getDiff();
}

With two images as input, it returns the difference ratio between them, and exactly as you want, save the "diff image" as png.

I guess it can solve your problem but if you need something more specific, feel free to ask me the feature you need.

Answer 2

My team and I created the image_compare package to calculate differences between two images. There is a variety of algorithms to achieve this task such as percentage difference from overlaying images, euclid. color distance, RGB histogram comparison, and hashing comparison such as perceptual hash.

Here's quick example:

import 'package:image_compare/image_compare.dart';

// ...

Future<double> compare() async {
  var a = File('../images/tiger.jpg');
  var b = Uri.parse('https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample- images03.jpg');

  return compareImages(src1: a, src2: b);
}

// ...