跳到正文

图片差异对比

Image Diff

逐像素比较两张图片,标出改动的地方并给出感知差异分数。

两张本该一模一样的截图,以及它们到底一不一样的问题。单靠变化像素数回答不了——抗锯齿会改变几千个像素而毫无意义——所以这个工具在它旁边报告 SSIM 和 DSSIM,并给你四种看差异的方式。

🔒 完全在你的浏览器里运行diffcompareqavisual

把“改动前”的图片放到这里

浏览器能解码的格式都行。

把“改动后”的图片放到这里

浏览器能解码的格式都行。

高亮方式

怎么用

  1. 拖入前后两张

    接受不同尺寸:两张都用透明填充到并集,所以重叠部分正确比较,不重叠的部分显示为差异——它本来就是。

  2. 设容差

    在 YIQ 里度量,所以同样幅度的亮度变化大约算色相变化的 2.5 倍——这是眼睛给它们的排序。设为 0 时任何地方差一个编码值就算失败。

  3. 把两类数字放在一起读

    2% 像素变化、SSIM 0.999 是抗锯齿。2%、SSIM 0.94 是有东西在动。

  4. 小位移用擦除对比

    它把两个版本放在同一个视网膜位置上,这是亚像素位移变得可见的唯一办法——眼睛没法把那么多细节带过并排比较所需的那次扫视。

常见问题

多少 SSIM 算好?

0.99 以上,两张是同一幅画面加上渲染噪声。0.95 以下,确实有东西不同。没有通用阈值;对照你自己流水线里一对已知正常的图来比。

为什么 DSSIM 和 SSIM 不一样?

DSSIM 在 L*a*b* 里跨五个尺度做同样的结构比较,所以纯颜色变化也算数,某个缩放级别上的差异也藏不到另一个后面。两者不一致时,变化是颜色而不是结构。

能用它做视觉回归测试吗?

用来查看一次失败,能——四个视图就是为此。要在 CI 里跑比较,你需要的是测试运行器里同样的算术,而不是一个浏览器标签页。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。