截图对比正是像素级工具的主场:UI 回归、设计稿 QA、CSS 改动前后、验证 bug 修复是否真的只改了该改的地方。肉眼并排看两张截图会漏掉 1 像素的偏移和细微色差——像素差分不会。
工作流为速度而设计:截图后 Ctrl+V 直接粘贴进区域,再粘贴第二张,点像素差分。变化区域在灰度背景上标红,阈值滑块可过滤字体抗锯齿噪声,聚类模式给每个变化区域画框。
如果两张截图没有完全对齐——比如一张多了个工具栏——先用叠加对齐模式把一张拖到另一张上方,方向键 1px 精度微调,再做差分;或者用 A/B 闪烁原位切换对比。
使用方法
- 1截好两张图,打开工具(2 个区域)。
- 2点击区域后 Ctrl+V 逐张粘贴截图——不用先存盘。
- 3点「像素差分」高亮差异,调阈值过滤噪声,导出差分 PNG 附到 bug 报告里。
为什么用这个工具
剪贴板直接粘贴
Ctrl+V 秒进区域——省掉存盘再上传的往返。
带降噪的像素差分
阈值和强度滑块过滤字体抗锯齿;聚类框直接指出每处变化。
叠加对齐处理错位
方向键 1px 精度把一张截图对齐到另一张上再对比。
可导出的证据
差分视图导出 PNG,直接附进 bug 报告或 PR。
常见问题
两张截图差 2px 错位还能差分吗?
能。用叠加对齐移动其中一张(方向键 1px、Shift+方向键 10px)对齐后再差分。
怎么忽略微小的渲染差异?
调高阈值滑块——低于阈值的像素差(如字体平滑)被过滤,只保留真实变化。
尺寸不同的截图能对比吗?
并排查看没问题。像素差分作用于重叠区域,裁剪到相同区域效果最干净。