图片 / 照片工作室

前后对比滑块

使用可编辑的标签和实时滑块制作前后对比。下载包含两张图片的独立HTML文件、动画GIF擦除过渡,或在支持的浏览器中导出WebM。

前后对比滑块: 工具会采用对比前图片的比例,并将对比后图片居中裁剪以适应。下载的HTML包含作为data URI的两张PNG图片,以及可通过键盘访问的范围滑块。GIF擦除动画会限制在480 × 480像素以内;在浏览器支持录制的情况下,WebM擦除动画会录制约2秒。 完全在浏览器中本地运行,文件不会上传到服务器。

使用次数
在浏览器中
费用
免费·无需注册
可用性
可直接使用
前后对比滑块本地处理

完全在浏览器中运行

应用于下一次栅格导出。
选择之前的照片

点击、拖放或粘贴·仅保留在此设备上

选择之后的照片

点击、拖放或粘贴·仅保留在此设备上

处理前照片决定比例;处理后照片会从中心裁剪以适应尺寸。静态图片和HTML图片均不超过1200 × 1200像素。GIF擦除动画不超过480 × 480像素。

HTML导出文件将图片和滑块代码包含在同一个文件中。在浏览器中打开文件,即可拖动滑块或使用箭头键。

实时对比

请选择两张照片进行比较。

此浏览器不支持WebM录制。请改为下载GIF擦除动画。

便携式对比

两张图片会归一化为相同比例,并以PNG数据URI的形式嵌入HTML。原生范围输入控件控制可见的后图像区域,并支持键盘方向键。文件包含内联JavaScript,限制性较强的托管策略可能会阻止它运行。

动画导出

录制前会检查WebM是否可用。当WebM或画布捕获不可用时,将使用GIF作为后备格式。MediaRecorder支持检查:https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

使用方法

  1. 选择对比前和对比后的照片。
  2. 添加标签并移动对比滑块。
  3. 下载用于交互式滑块的HTML,或下载GIF及受支持的WebM擦除动画。

隐私与限制

你的输入内容和图片会保留在浏览器中。不会上传任何内容。

相关工具

常见问题

HTML可以离线使用吗?

可以。它会将两张图片和滑块代码包含在同一个文件中,不会发出外部请求。

为什么WebM选项被禁用了?

浏览器必须支持WebM录制和画布捕获。无法使用这些功能时,请改用GIF擦除动画。

这与图片对比滑块有什么不同?

此页面可以导出可正常使用的HTML滑块和动画擦除过渡。图片对比滑块会导出静态PNG,包括并排布局。

免费工具·使用在浏览器中次·无需账户