无需上传、100% 本地处理、无需账户

图片对比

加载两张图片,用拖动滑块或并排视图对比。非常适合编辑前后对比。无上传。

图片对比滑块 的工作原理

图像对比滑块工具让你并排加载两张图像,并拖动垂直分隔线以显示更多一张图像和更少另一张图像。这种前后对比布局是展示图像两个版本之间差异的直接、低摩擦的方式。两张图像都通过 File API 从你的本地磁盘加载,由浏览器渲染到屏幕上;没有任何内容被上传到服务器。

滑块使用 CSS clip-path 方法,使两张图像之间的过渡始终像素对齐,边界处没有混合或插值。你也可以切换到分屏视图,在固定的左右面板中显示两张图像。该工具适用于比较照片编辑、压缩结果、设计迭代,或任何两张需要清晰看到差异的图像。

图片对比滑块 的分步使用说明

  1. 将第一张图像(「前」版本)拖到左侧上传区域。
  2. 将第二张图像(「后」版本)拖到右侧上传区域。
  3. 左右拖动分隔线,一次显示更多一张图像。
  4. 切换到分屏视图,在固定面板中并排查看两张图像。
  5. 使用全屏按钮最大化对比视图,以便仔细检查。

常见使用场景

  • 摄影师将原始 RAW 导出与修图版本进行比较,评估编辑改变了多少图像。
  • 开发者检查一对压缩前后的图像,评估给定压缩级别下的画质损失是否可接受。
  • UX 设计师通过将旧界面截图放在左边、新界面截图放在右边,向利益相关者展示 UI 重新设计。
  • 内容编辑验证图像处理(色彩分级、裁剪)在缩略图和全尺寸版本之间是否一致。

常见问题

两张图像需要相同的大小吗?

当两张图像具有相同尺寸时工具效果最佳,因为滑块可以精确叠加它们。如果图像大小不同,工具会将它们缩放到通用显示尺寸。如果宽高比不同,边缘处可能出现一些错位。

图像会被发送到某处进行比较吗?

不会。两张图像都通过 File API 从你的文件系统加载,并在浏览器中绘制到 Canvas 元素中。对比是客户端渲染操作。两张图像都不离开你的设备。

可以比较来自两个不同 URL 而不是本地文件的图像吗?

当前工具只接受本地文件。从远程 URL 加载图像需要浏览器获取它们,并受到许多图像托管服务不允许的 CORS 限制。

对比可以处理的最大图像大小是多少?

限制取决于浏览器的 Canvas 内存。在大多数桌面设备上,每张约 20 百万像素的图像可以正常处理。非常大的图像可能会减慢渲染速度,或在低端硬件上导致内存错误。

可以保存特定滑块位置的截图吗?

操作系统的截图工具(或浏览器 DevTools 中的截图功能)是捕捉特定滑块位置的直接方式。对比视图本身没有合并图像的内置导出按钮。