前面做完图片清晰度检测以后，这次继续做一个比较轻量的 OpenCV 小工具。
平时在开发、整理图片或者检查页面截图时，经常会遇到这种情况：
两张图片看起来差不多，但到底改了哪里？
如果变化比较明显，肉眼当然很容易发现。
但如果只是：
多了一个小图标、改了一块文字、某个区域颜色发生变化，
一张张来回切换对比就比较麻烦。
所以这次做了一个简单的：
Image Difference Checker
上传两张图片以后，程序会计算相似度，并自动把变化区域用红框标出来。
一、这个工具能做什么？
功能没有做得很复杂，主要就是完成图片 A / B 的差异比较。
目前页面可以直接显示：
Image A
Image B
Similarity Score
Difference Region
Difference Result
最终效果就是：
两张图片
↓
自动比较
↓
计算相似度
↓
定位变化区域
↓
红框标出差异
整个流程不需要训练模型，上传图片以后直接比较即可。
二、为什么要同时看"相似度"和"差异区域"？
如果只计算一个相似度，例如：
95%
其实还不够直观。
因为它只能告诉我：
两张图片整体上很像。
但并不能直接告诉我：
到底哪里不一样。
所以这次除了 Similarity Score 之外，还会进一步寻找变化区域。
最终在 Difference Result 中使用红框标记。
这样就同时有了两种信息：
Similarity Score：变化有多大
以及：
Difference Region：变化在哪里
这比单纯输出一个百分比更方便。
三、这次使用 OpenCV + SSIM
页面中使用的是：
OpenCV + SSIM
SSIM 也就是 Structural Similarity，结构相似性。
它并不是简单判断两个像素值是否完全相同，而是用来衡量两张图像在结构上的相似程度。
对于这类图片修改检测来说，比直接判断：
Image A == Image B
更有实际意义。
整体思路可以理解成：
读取 Image A / Image B
↓
统一比较尺寸
↓
计算图像相似程度
↓
生成差异结果
↓
找到变化区域
↓
绘制红色 Bounding Box
四、第一组测试：只修改一个小区域
为了验证效果，我先用同一张狗狗图片做测试。
Image A 保持原图不变。
Image B 只在右侧加入了一小块明显的图形。
页面显示本次比较尺寸：
1119 × 211 pixels
最终得到：
Similarity Score：95.54%
Difference Region：
1
可以看到，两张图片绝大多数区域完全相同。
真正发生变化的只是一小块区域。
所以最终相似度仍然保持在：
95.54%
同时 Difference Result 也成功把修改位置用红框标了出来。
五、95.54% 能说明什么？
这里的 95.54% 可以直观理解为：
两张图片整体仍然高度相似。
因为这次修改占整张图片的比例比较小。
原图的大部分：
狗狗
湖面
树木
建筑
都没有变化。
只有右侧一小块区域发生修改。
因此：
局部修改 → 整体相似度仍然较高
这一点和肉眼观察结果基本一致。
六、第二组测试：扩大修改区域
接下来继续使用同一张原图。
但这一次，我把修改区域明显扩大，在图片左侧增加了一整块新的内容和文字。
重新进行比较后：
Similarity Score 从：
95.54%
下降到了：
82.10%
Difference Region 仍然是：
1
因为这一大片变化区域是连续连接在一起的，所以最终被识别成一个完整差异区域。
七、两次结果放在一起看
这两次真实测试结果如下：
| 测试 | Similarity Score | Difference Regions |
|---|---|---|
| 小范围修改 | 95.54% | 1 |
| 大范围修改 | 82.10% | 1 |
从：
95.54% → 82.10%
可以明显看到：
修改区域扩大以后，两张图片的整体相似度也随之下降。
而红框的位置也跟着变化。
第一组只框住右侧的小块修改区域。
第二组则框住了左侧更大的修改区域。
这就同时验证了两个功能：
相似度能够反映变化程度
以及：
差异框能够定位变化位置
八、Difference Region 为什么都是 1？
两次测试中：
Difference Regions 都显示为：
1
但这并不代表两次修改程度一样。
Difference Region 表示的是：
程序最终找到了几个独立的连续变化区域。
第一张虽然变化比较小，但它本身是一整块连续区域。
第二张变化面积更大，但新的文字和背景同样集中在一块连续区域中。
所以两次都被归并成：
1 个 Difference Region
只是它们的：
面积不同
这也是为什么第二组的 Similarity Score 更低。
九、这种小工具有什么实际用途？
虽然这个项目很简单，但实际可以用在很多地方。
例如：
UI 页面回归检查
同一个网页修改前后各截一张图。
程序可以快速找到：
按钮位置变化
文字变化
组件缺失
布局偏移
图片版本对比
例如设计稿 V1 和 V2。
直接上传两张图片，就可以快速找到修改区域。
实验结果检查
在计算机视觉实验中，有时候需要比较：
处理前
处理后
两张结果图到底改了哪些地方。
也可以直接使用这种方式辅助观察。
截图内容检查
比如某个软件升级前后截图。
如果肉眼不容易发现细小改动，可以先让程序自动把变化区域框出来。
十、为什么这次也保持简单？
前面做 YOLO、ByteTrack、轨迹预测和 Collision Risk 时，一个项目会涉及很多模块。
但最近我想换一种方式：
一个文章解决一个具体的小问题。
所以这次没有继续加入：
账号系统
数据库
复杂前端框架
历史记录
云端存储
核心就是：
上传两张图片
↓
比较
↓
给出结果
对于这种工具来说，功能越直接反而越好。
十一、这种方法也不是万能的
图像差异检测还有一个需要注意的问题。
如果两张图片虽然内容一样，但是出现：
轻微位移
缩放
裁剪
亮度变化
压缩质量变化
程序也可能把这些区域判断成差异。
例如同一张图片整体向右移动几像素，
人眼会觉得：
"内容其实没有变化。"
但对于像素和结构比较来说：
大量位置都已经发生改变。
所以这类工具更适合：
尺寸和构图基本一致的图片对比。
例如：
UI 截图
版本对比
局部修改检查
而不是用来判断：
两张完全不同拍摄角度的照片是不是同一个场景。
总结
这次完成了一个比较简单的：
Image Difference Checker
核心功能：
Image A
Image B
↓
OpenCV + SSIM
↓
Similarity Score
↓
Difference Detection
↓
Red Bounding Box
两组真实测试：
小范围修改：
95.54% Similarity
大范围修改：
82.10% Similarity
两次都成功找到：
1 个 Difference Region
并且正确使用红框标出了修改位置。
相比上一篇的图片清晰度检测，这次解决的是另一个很常见的问题：
上一篇回答：
这张图片糊不糊？
这一篇回答：
这两张图片到底哪里不一样？
这种小项目开发时间不长，但效果非常直观，也很适合做成日常使用的小工具。
下一篇准备继续换一个简单的 OpenCV 方向：
一张图片主要由哪些颜色组成？------图片主色提取工具。