图片对比
原图(Before)
点击选择第一张图片
新图(After)
点击选择第二张图片
提示:所有图片仅在浏览器本地处理,不会上传到任何服务器;支持 JPG / PNG / WebP / GIF / BMP 等常见格式。
请先在上方上传两张图片
四种对比模式说明
滑动对比:拖动中间分割线,左右两侧同步显示两张图,适合前后修图、UI 改版对比。
并排对比:左右各显示一张,便于全局对照。
叠加对比:将新图覆盖在原图之上,调节透明度查看细节差异(俗称"洋葱皮")。
像素差异:基于 pixelmatch 算法逐像素比较,YIQ 色彩空间感知,红色高亮差异区域,并自动跳过抗锯齿。
隐私与性能
所有图片均通过浏览器原生 Canvas 在本地完成读取与对比,不会上传到服务器。
像素差异使用业界标准 pixelmatch 库,速度快且支持反走样剔除。
若两张图片尺寸不同,会自动按"包含"方式缩放对齐到较大画布上以便对比。
常见问题(FAQ)
这款图片对比工具适用于哪些场景?
UI 设计稿与开发实现的还原度对比、修图前后效果展示、网页改版前后比对、电商商品图细节差异、游戏画质设置对比、地图/卫星图变化检测、医学影像参考、建筑施工进度记录,以及前端自动化视觉回归测试等。
像素差异检测的灵敏度怎么调?
阈值越小越敏感(更多细微差异会被标记,但可能包含 JPEG 压缩噪声),阈值越大越宽松(仅显示明显差异)。默认 0.10 适合大多数 UI 对比场景,截图对比建议 0.05~0.10,照片对比建议 0.10~0.20。开启"忽略抗锯齿"可避免字体边缘的伪差异。
两张尺寸不同的图片可以对比吗?
可以。本工具会按"包含"方式将两张图等比例缩放到统一画布并居中对齐进行展示与差异计算。但若你追求严格的像素级精确对比,建议先把两张图调整为完全相同的分辨率再上传,避免缩放插值引入的轻微噪声。
图片会不会被上传到服务器?
不会。本工具完全在浏览器前端使用 Canvas API 读取像素数据进行处理,全程不发起任何上传请求;你可以放心对比包含敏感信息的设计稿、合同截图、医疗影像等内容。
支持把差异图保存下来吗?
支持。在"像素差异"模式下点击"下载差异图"按钮即可将带红色高亮的差异图保存为 PNG 文件,用于在 Issue、PR、设计评审等场合作为证据图。
