Image Compare - 图片对比工具

一个纯网页实现的图片对比工具，支持同时对比最多 4 张图片，所有图片会同步缩放和移动。

功能特点

• 🖼️ 多图对比：支持同时对比 2-4 张图片
• 🔍 同步缩放：鼠标滚轮或双指捏合缩放时，所有图片同步缩放
• 🖱️ 同步移动：拖拽或单指滑动移动时，所有图片同步移动
• 📱 触屏支持：完美支持移动设备，支持双指缩放和单指拖拽
• 📐 智能布局：根据图片数量和屏幕宽高比自动调整布局
  • 2 张图片：宽屏时左右布局，窄屏时上下布局
  • 3 张图片：宽屏时左右布局，窄屏时上下布局
  • 4 张图片：四宫格布局
• 🌐 纯网页实现：无需安装任何软件或扩展，直接在浏览器中使用

使用方法

1. 点击"选择图片"按钮
2. 选择 2-4 张图片（最多 4 张）
3. 使用鼠标滚轮或双指捏合进行缩放（所有图片同步缩放）
4. 按住鼠标左键拖拽或单指滑动移动图片（所有图片同步移动）

操作说明

桌面端

• 缩放：在任意图片上使用鼠标滚轮，向上滚动放大，向下滚动缩小
• 移动：按住鼠标左键并拖拽，所有图片会同步移动

移动端（触屏）

• 缩放：使用双指捏合手势进行缩放，所有图片会同步缩放
• 移动：单指滑动拖拽，所有图片会同步移动

通用

• 缩放范围：支持 0.2 倍到 5 倍的缩放

技术实现

• 使用 Canvas/Image API 加载和显示图片
• CSS Transform 实现缩放和移动
• 纯 HTML/CSS/JavaScript 实现，无依赖
• 响应式布局，适配不同屏幕尺寸

访问地址

• 在线演示

浏览器支持

• Chrome/Edge 60+
• Firefox 55+
• Safari 12+

注意：需要使用支持 ES6+ 的现代浏览器。