专业图片对比工具

支持滑块对比、透明混合及并排显示模式。轻松洞察两张图片之间的细微差异。

📤
上传图片 A (Before)
📤
上传图片 B (After)
After
Before
↔️
BEFORE
AFTER
A (BEFORE)
B (AFTER)
🔍

请上传两张图片以开启对比

图片对比滑块完整使用指南

专业图片对比工具用于观察处理前后差异。上传图片 A(Before)与图片 B(After)后,可在滑块对比、并排显示等模式间查看。滑块模式通过拖拽分割线控制 Before 覆盖宽度;并排模式左右同时展示。未上传齐两张图时显示空状态提示。图片在浏览器本地预览,适合修图前后、压缩前后、设计改版对照,不自动计算像素级差异报告。

界面结构

推荐步骤

  1. 先上传原图到 A,再上传处理后图到 B,保持构图尽量一致。
  2. 在滑块模式左右拖动手柄,观察边缘、噪点、色彩变化。
  3. 需要同时看全图时切并排模式。
  4. 对比结束可保留截图用于评审,本页不强制保存历史。

适用场景

边界

常见问题

只上传一张为什么不能对比?

需要 A、B 都就绪才进入有效对比;否则显示空状态。

滑块拖不动?

确认两图已加载完成,并在对比容器内拖拽手柄区域。

图片会上传服务器吗?

预览基于本地文件读取,用于前端展示对比。

能对比 PDF 吗?

请先导出为图片。输入 accept 为 image/*。

和文本 diff 有何不同?

文本 diff 比字符串行;本页比像素画面观感,不做文本算法。

如何得到更公平的画质对比?

尽量使用同构图、同裁切、同显示尺寸,只改变处理参数。

上传与视图对照

A/B 两张上传卡 #cardA/#cardB,预览 #prevA/#prevB,隐藏文件框 #inputA/#inputBhandleFile 读入后 checkReady 判断是否两张齐全。齐全后进入 #compareStage:滑块视图 #sliderView 底层 #imgB、上层裁切 #beforeWrap+#imgA,手柄 #sliderHandleupdateSlider 控制覆盖宽度;并排视图 #sideView#sideA/#sideB 同时展示。未就绪时 #emptyMsg 提示上传两张。setMode 切换模式;swapImages 交换前后图;resetAll 清空重来;downloadSnapshot 可导出当前对比快照(以按钮是否展示为准)。

让对比更公平

A 放处理前、B 放处理后,构图与裁切尽量一致,只改变滤镜/压缩/修图参数。滑块适合盯边缘与局部噪点;并排适合看整体构图。分辨率不同时受 object-fit 影响可能裁切或留白,解读差异前先确认显示框。大图占内存,卡顿可先缩小再比。本地预览不上传服务器,也不生成自动差异热力图。

与其他工具分工

文本 diff 比字符串;本页比画面观感。压缩/转格式可用格式转换器出 B 图,再用本页对照画质。尺寸修改页出多规格图后,也可用本页验收缩放是否糊边。PDF 请先导出为图片再上传,accept 面向 image/*。