工具介绍
图片对比工具可以让你拖拽分割线,同时对比两张图片的差异,常用于对比图片修改前后效果、不同版本图片对比、同场景不同时间拍摄照片对比。图片完全在浏览器本地处理,不会上传到服务器。
使用方法
- 点击「左侧图片」选择第一张图片上传
- 点击「右侧图片」选择第二张图片上传
- 两张图片上传完成后,对比区域会自动显示
- 拖拽中间的分割线左右移动,即可查看不同位置两张图片对比效果
实现原理
工具使用两个绝对定位图片容器,左侧图片铺满整个容器,右侧图片通过 overflow: hidden 只显示分割线左侧部分,拖拽分割线动态修改右侧容器宽度,实现对比浏览效果。图片按比例自适应容器大小,保持原始比例不变形。
注意事项
- 建议使用尺寸相近的两张图片进行对比,对比效果更好
- 本工具仅在浏览器本地处理图片,不会上传保存,不用担心隐私问题
- 如果图片尺寸过大,加载可能会稍慢,请耐心等待