Percy、Chromatic、BackstopJS 这类自动化视觉回归方案接进 CI 后很强，但很多视觉检查根本不值得那套配置：验证一个 hotfix 没有挤乱布局、排查一条「看起来哪里不对」的反馈、对比 staging 和生产的截图。这些场景你只需要两张截图和一次像素差分，而且是现在就要。
这个工具就是干这个的。把「改动前」「改动后」两张截图从剪贴板直接 Ctrl+V 粘贴进来，点像素差分，变化像素在灰度底图上标红。阈值滑块过滤字体抗锯齿和渲染噪声，聚类框圈出每个变化区域，差异百分比给你一个可判断的单一数字——0.00% 即像素级一致。
如果两张截图有轻微错位——多了滚动条、多了工具栏——先用叠加对齐模式，方向键 1px 精度把一张对到另一张上再差分。检查完把差分视图导出 PNG，作为证据附进 bug 单或 PR。
使用方法
- 1截取「改动前」「改动后」两张截图——来自两个构建、两个环境或 CI 产物都行。
- 2Ctrl+V 逐张粘贴进区域（不用先存盘），点「像素差分」。
- 3看差异百分比，调高阈值压掉渲染噪声，开聚类框定位每处变化，导出差分 PNG。
为什么用这个工具
差异百分比
一个数字说明问题：变化像素占比，随阈值调整实时更新。
阈值降噪
过滤字体平滑、JPEG 噪声等低于阈值的像素差，只留下真正的回归。
聚类框
每个变化区域带编号画框——直接跳到变化处，不用满屏扫。
零配置、全本地
无需流水线配置、基线管理和账号。截图在浏览器本地处理，不上传。
诚实对比：本工具 vs CI 型视觉回归方案
| View Multiple Images（本工具） | Percy / Chromatic / BackstopJS | |
|---|---|---|
| 前期配置 | 无——打开页面就用 | CI 配置、基线管理、按项目搭建 |
| 每次提交自动跑 | 否——手动检查 | 是——它们的核心价值 |
| 拿到第一个 diff 的时间 | 一分钟内 | 数小时初始配置 |
| 差分控制 | 阈值、强度、聚类框、差异百分比 | 各家不同；一般是阈值+忽略区域 |
| 截图去向 | 留在你的浏览器本地 | 上传到其云端（Percy/Chromatic） |
| 价格 | 免费，无需账号 | 有免费层；规模化后按截图数付费 |
抽查、排查、一次性对比用本工具——当问题是「这两个构建渲染得一样吗」，你想几秒内拿到答案又不想动 CI 时。
需要每次提交自动捕捉整个测试套件的视觉回归时，用 Percy、Chromatic 或 BackstopJS。本工具不做任何自动化——这是有意的。
常见问题
这能替代 Percy 或 BackstopJS 吗？
不能——它没有 CI 集成、基线和自动化。它替代的是手动侧：快速抽查、问题排查、验证单个修复，不需要流水线配置。
怎么得到通过/不通过的判断？
用差异百分比：把阈值调到压掉渲染噪声的水平，0.00% 即通过。剩余差异由聚类框精确定位。
两张截图错位几个像素还能比吗？
能。叠加对齐模式用方向键移动其中一张（1px，Shift 为 10px）对齐后再差分。
UI 截图会被上传吗？
不会。差分完全在浏览器内运行，不向服务器发送任何数据——未发布的 UI 也可以放心比。