如何比较两个图像并在抖动中突出显示新图像的差异？

Question

我是一个扑朔迷离的开发人员。我需要比较两个图像，并在新图像中突出显示差异（两个图像之间）？

两个图像第一个图像和第二个图像。

我的要求是比较这些图像并在另一个图像“ 差异图像”中突出显示差异区域。我正在努力实现基于屏幕截图的UI测试，如果两个图像之间存在差异，则需要使测试用例失败。

请找到以下屏幕截图以供参考。

在flutter / dart中是否有任何软件包可以实现相同的输出？

谢谢并恭祝安康，

阿什温

Answer 1

几个月前我读了你的问题，今天我刚刚上传了一个可以做你想做的包。

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();
}

以两个图像作为输入，它返回它们之间的差异比率，并且完全按照您的需要，将“差异图像”保存为 png。

我想它可以解决您的问题，但如果您需要更具体的东西，请随时问我您需要的功能。

Answer 2

我相信您正在寻找的是黄金档案测试：

\n\n

\n
• flutter/为 package:flutter 编写黄金文件测试
\n
• 中/你看出区别了吗？\xe2\x80\x94 Flutter 快照测试
\n
• medium/Flutter：黄金测试 \xe2\x80\x94 将小部件与快照进行比较
\n

\n\n

基本上，你创造了你的黄金小部件并为其制作图像快照。

\n\n

然后在测试过程中，您检查应用程序是否显示完全相同的内容：

\n\n

await expectLater(\n    find.byType(RepaintBoundary),\n    matchesGoldenFile(\'golden-file.png\'),\n  );\n

\n\n

因此，虽然这不完全是您的要求，image==image?但至少是image==live app display?

\n\n

出于好奇，Facebook 还为原生 Android 创建了类似的东西： http ://facebook.github.io/screenshot-tests-for-android/

\n