图像差异检查器

进行了 CSS 调整并想知道到底发生了什么变化？比较两个屏幕截图以进行 QA 视觉回归检查？想知道同一张照片的两个导出版本之间到底发生了什么变化？在两张图像之间来回滚动并眯着眼睛寻找差异是缓慢且不可靠的——该工具将两张图像重叠并显示一张图像中每个变化的像素。

比较是真正的像素差异数学，与 Pixelmatch 等工具使用的算法相同：两个图像的每个像素都从 RGB 转换为 YIQ 颜色空间（Y = 亮度，I 和 Q = NTSC 色度轴），并计算两个 YIQ 点之间的欧几里得距离。该距离与灵敏度滑块设置的阈值进行比较 - 提高灵敏度以捕获细微的颜色变化，降低灵敏度以忽略压缩噪声并仅关心明显的变化。

即使没有发生任何有意义的变化，简单的逐像素比较也会将每个抗锯齿边缘显示为“不同”，因为平滑会将少数边界像素移动几个阴影。该工具在两个图像上运行真正的抗锯齿启发式算法：如果像素不位于平滑梯度内，则该像素仅被视为真正的差异 - 具体来说，如果任一源图像中其自己的 3x3 邻域尚未包含比自身更亮和更暗的像素，这是 AA 平滑边缘的指纹，而不是实际内容。

上传图像 A 和图像 B，根据需要调整灵敏度，然后按执行。您可以获得差异像素的准确百分比以及差异图像，其中每个真实变化都以明亮的洋红色突出显示，而不是原始的暗淡版本 - 下载它并将其直接附加到您的错误报告或质量检查注释中。两个图像必须具有相同的尺寸；如果不这样做，该工具会清楚地告诉您，而不是默默地裁剪或拉伸其中之一。任何时候都不会离开您的浏览器。