多媒体对比工具

在线预览 | 备用链接

一款极简的在线图片与视频对比工具，专为桌面端优化，支持同步缩放、平移以及视频播放同步。

适用于设计师、摄影师、视频剪辑师等需要精确比较多媒体文件细节的用户。

功能特性

• 双面板实时对比：左右面板同步操作，支持图片与视频
• 同步缩放和平移：鼠标、触控板手势全支持
• 视频播放同步：自动同步左右视频的播放/暂停状态及进度
• 多种上传方式：拖拽上传、点击选择、Ctrl+V 粘贴图片或视频
• 深色模式支持：自动跟随系统
• 双语国际化：简体中文 / English

快速开始

环境要求

• Node.js 18.x+
• npm 9.x+

安装启动

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:3000 查看应用

构建部署

# 构建生产版本（静态导出到 out/）
npm run build

# 预览生产构建
npm start

静态文件将生成在 out 目录

使用说明

上传文件

• 拖拽上传：拖拽图片或视频到左右面板
• 点击选择：点击面板上传区域
• 粘贴内容：Ctrl+V / Cmd+V 粘贴图片或视频（优先空面板，都有时替换左侧）

操作手势

• 鼠标：拖拽平移内容，滚轮缩放（以鼠标为中心）
• 触控板：双指滑动平移内容，双指捏合缩放
• 按钮：+ 放大 - 缩小 ↩ 重置 清空 移除所有

视频控制

• 同步控制：播放、暂停、进度跳转及静音状态在两侧视频间自动同步

界面说明

• 控制栏：顶部居中，显示缩放比例(0.1x-10x)和功能按钮
• 面板：左A右B，左下角标签，右上角删除，左下角尺寸（及视频进度）
• 主题：自动跟随系统深色模式
• 语言：点击 EN/中 切换，自动保存

项目截图

许可证

MIT License - 查看 LICENSE 文件了解详情