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

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

界面结构

上传卡 A/B：点击触发隐藏 file input，选择后显示预览缩略图。
滑块视图：底层 After、上层 Before 裁切，中线手柄可拖。
并排视图：左右两栏分别显示 A/B。
空状态：提示“请上传两张图片以开启对比”。
模式切换：页面提供滑块/并排（及可能的透明混合）控件，以界面按钮为准。

适用场景

磨皮/滤镜/超分前后效果验收
压缩画质对比（体积 vs 清晰度）
UI 改版、海报迭代的视觉 diff

边界

不输出自动“差异热力图”，需人眼观察。
两图分辨率不同时，以容器 object-fit 展示，可能出现裁切或留白。
大图预览受内存限制，可能较慢。
本地预览，不替代版本管理系统。

常见问题

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

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

滑块拖不动？

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

图片会上传服务器吗？

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

能对比 PDF 吗？

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

和文本 diff 有何不同？

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

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

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

上传与视图对照

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

让对比更公平

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

与其他工具分工

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