OverlayDiff
多图叠加对比 · 实时差异热力图 · 批注整改标注
项目访问地址：多图叠加对比 · 实时差异 · 批注
OverlayDiff 是一个基于浏览器的多图叠加对比工具，支持图层叠加、实时差异热力图、批注标注与焦点查看。无需安装，打开即用，适合工程图纸、设计稿、版本迭代等场景下的快速差异比对与整改标注。
项目描述
OverlayDiff 使用纯 HTML + CSS + JavaScript 构建，基于 Canvas 2D 进行高性能渲染，零第三方依赖，单文件即可运行。它提供四种对比视图（叠加、并排、滑动、闪烁），支持像素级差异热力图，允许用户圈选区域添加整改批注，并通过焦点模式快速定位关注图层。
功能
1. 多图层叠加与管理
- 支持添加多张图片，可通过按钮选择或拖拽到画布上传
- 图层列表支持拖拽排序、上移/下移、显示/隐藏、删除
- 每个图层可独立调整不透明度、缩放比例、混合模式（正常、差值、正片叠底、滤色、叠加、变暗、变亮、排除）
- 内置示例图片，一键加载即可体验
2. 四种对比视图
- 叠加：所有图层按各自混合模式叠加显示，适合精确对齐
- 并排：所有可见图层横向平铺，适合整体浏览
- 滑动：可拖拽分割线，左右对比两张图
- 闪烁：自动交替显示两张图，快速发现差异
3. 实时差异热力图
- 像素级差异计算，以热力图形式叠加在画布上
- 暖色（黄→橙→红）表示变亮，冷色（青→蓝→紫）表示变暗，颜色越深差异越大
- 支持忽略阈值调节，过滤微小差异
- 拖动图层时实时刷新（低分辨率快速预览，松手后精细计算）
- 可随时开启/关闭，关闭时两张图以半透明叠加，仍可肉眼对比
4. 聚焦查看
- 点击图层即可设为焦点，焦点图层保持清晰，其余图层淡化
- 淡化强度可调，快速突出关注区域
- 仅在差异热力图开启时生效，避免干扰普通对比
5. 批注与整改标注
- 开启批注模式后，可在画布上圈选任意矩形区域
- 支持输入整改内容、问题描述或备注
- 批注框以彩色边框和编号显示，所有批注文字始终可见
- 选中批注高亮显示，带发光边框与连接线
- 批注坐标归一化存储，随图层移动、缩放自动跟随
- 批注列表支持快速定位、编辑与删除
6. 视图操作
- 滚轮缩放，中键拖动平移
- 一键重置视图、适应窗口
- 画布实时显示缩放比例与图层数量
快速开始
环境要求
- 任意现代浏览器（Chrome、Edge、Firefox、Safari）
- 无需 Node.js、无需构建工具
直接运行
- 下载或克隆本项目
- 双击打开
index.html - 点击「示例」加载内置测试图，或点击「添加图片」/ 拖拽上传自己的图片
本地服务器运行（可选）
```bash
Python 3
python -m http.server 8080
或 Node.js
npx serve .