图片对比工具

三种模式各有侧重，可按需切换：
- 左右并排：适合快速整体浏览对比，两张图等比缩放后并排拼接为一张图， 一眼即可看到整体差异，可下载为合成图用于汇报与文档
- 滑块叠加：适合同区域细节对比，两张图叠加后通过可拖动的垂直分隔线 在同一位置切换查看，便于观察细微改动（如按钮颜色、文字微调、像素级对齐）
- 差异高亮：适合精确像素差异分析，逐像素对比后将差异区域 以红色高亮标记，并输出差异像素数、差异比例等统计，适用于回归测试与质量验证

本工具使用感知加权欧几里得距离（基于 ITU-R BT.601 颜色权重）计算两像素的差异强度： 对每个像素的 R/G/B 三个通道按 0.299 * ΔR² + 0.587 * ΔG² + 0.114 * ΔB² 加权求和后开方， 权重反映人眼对绿色最敏感、对蓝色最不敏感的特性，结果归一化到 0-255 范围。 若该差异值大于阈值则判定为差异像素，标记为红色高亮；否则视为相同像素，灰度化显示。 全部计算在浏览器本地的 Canvas API 与 ImageData 中完成，无任何网络请求。

阈值决定判定像素是否为"差异"的敏感度，本工具提供三档预设：
- 严格（5）：极低阈值，捕捉细微差异。适用于回归测试、像素级验证等 需要检测任何改动的场景，但可能将 JPEG 重编码噪声误判为差异
- 默认（20）：平衡可见性与噪声的推荐值。适用于一般对比、设计稿版本对比等 大多数场景，能过滤编码噪声同时保留人眼可见差异
- 宽松（50）：高阈值，仅保留显著差异。适用于压缩损失对比、明显改动检测等 只关心重大差异的场景，可彻底过滤细微噪声
也可手动滑动滑块自定义阈值，实时查看差异图变化。

可以。本工具会自动取两张图中较小的宽度和高度作为对比区域，仅在该共同区域内进行像素对比， 超出区域的部分不参与计算。例如图片 A 是 1920×1080、图片 B 是 1280×720， 则在 1280×720 区域内对比，A 的右下角超出区域不参与计算。 页面会显示尺寸差异提示（"两张图尺寸不同，将以共同区域 WxH 进行对比"）告知用户实际对比范围。 如需完全相同尺寸对比，建议先用图片缩放工具 或图片裁剪工具统一尺寸后再对比。

滑块叠加模式提供两种操作方式：
- 鼠标：在对比区域内按住左键拖动，分隔线会跟随鼠标位置移动； 也可点击区域任意位置直接跳转到该位置
- 触摸屏：支持单指拖动分隔线，适配移动端与平板设备
- 键盘：聚焦后使用 ← / → 方向键 每次移动 2%，满足无障碍访问需求
分隔线左侧显示图片 A、右侧显示图片 B，分隔线上有 ⇄ 拖动把手提示。 左右两侧的 A / B 字母标签帮助快速识别当前查看的是哪张图。

两个指标帮助评估差异的剧烈程度：
- 最大差异（0-255）：所有像素中差异最大的那个像素的差异值。 值越大表示存在非常明显的差异（如完全相反的颜色）；值为 0 表示两图完全相同
- 平均差异强度（0-255）：仅统计被判定为差异的像素的平均差异值， 反映差异的平均剧烈程度。值越高表示差异区域整体改动越大
使用场景：差异比例为 5% 时，若平均差异强度高（如 100+），说明是少量但明显的改动 （如 Logo 颜色变化）；若平均差异强度低（如 20-30），说明是少量细微改动（如压缩噪声）。

支持 PNG / JPEG / WebP / GIF / BMP / AVIF 六种常见格式输入。 对于 GIF 动图，Canvas API 仅取首帧进行对比（这是浏览器原生限制： drawImage 只绘制第一帧），因此对比结果是首帧的差异，不适用于多帧动画对比。 如需对比不同格式的图片（如 PNG vs JPEG），可直接上传，工具会自动统一到共同尺寸后对比。 输入文件大小上限为 30MB，避免浏览器内存压力。

不会。本工具完全在浏览器内运行，所有对比处理由 Canvas API 的 ImageData 在本地执行， 不会发送任何图片数据到服务器。使用 URL.createObjectURL() 创建本地预览 URL， 对比结果在内存中生成可直接下载。全程零网络请求，可离线使用。 可在浏览器开发者工具 Network 面板确认无任何外部请求。

差异图导出为 PNG 格式（image/png），原因：
- 无损压缩：保留精确像素信息，避免二次压缩导致差异区域失真
- 支持透明：差异像素的半透明叠加效果可完整保留
- 广泛兼容：所有平台与浏览器均支持查看与嵌入
文件名格式为 原文件名-diff.png（如 design-v1-diff.png）。 左右并排模式的合成图同样导出为 PNG，文件名格式为 原文件名-compare.png。

两者常配合使用：
- 图片压缩工具（/image-compress）： 专注于体积压缩，输出压缩后的图片
- 本对比工具：可用于评估压缩前后的视觉差异， 将原图与压缩图对比，差异高亮模式下可量化压缩带来的视觉损失
典型工作流：上传原图到压缩工具 → 调整质量参数得到压缩图 → 上传原图与压缩图到本工具 → 切换"差异高亮"模式查看压缩损失区域 → 根据差异比例与平均差异强度选择合适的压缩质量。

差异区域检测采用网格分块 + 并查集连通合并算法，流程如下：
- 网格分块：将差异图按 32×32 像素划分为网格块，统计每块的差异像素数与平均强度
- 活跃块标记：差异密度 ≥ 5% 的块被标记为活跃（过滤孤立噪声点）
- 连通合并：使用并查集（Union-Find，路径压缩 + 按秩合并） 对相邻活跃块进行 4 连通合并，得到连续的差异区域
- 包围盒计算：每个连通分量计算最小包围盒（x, y, width, height）
为何不用完整连通区域检测？完整算法需对每个像素做 BFS/DFS 遍历， 复杂度 O(n²) 不适合浏览器实时交互。网格分块将复杂度降至 O(n) + O(块数)， 且输出更实用：用户看到的是"差异集中在哪个区域"而非"每个像素群"。 检测结果会在差异图上叠加半透明方框（可开关），并按差异像素数降序列出区域列表。

点击"导出 JSON"按钮可下载差异分析报告，文件名格式为 原文件名-diff-report.json， 包含三部分：
- meta（元信息）：生成时间、阈值、网格尺寸、对比尺寸、两张图的文件名/大小/尺寸/格式
- stats（统计）：差异像素数、总像素数、差异比例、最大差异、平均差异强度
- regions（区域列表）：最多 50 个差异区域（按差异像素数降序）， 每个区域包含坐标 (x, y)、尺寸 (width, height)、差异像素数、密度、平均强度
自动化测试集成：JSON 格式易于程序解析，可在 CI/CD 流水线中： 截图对比 → 调用本工具生成 JSON → 解析 stats.diffPercent 判断是否超过阈值 → 失败时附上 JSON 报告与差异图作为失败证据。相比单纯差异图，JSON 提供结构化数据便于 断言与趋势分析（如差异比例随版本变化曲线）。

差异区域列表位于统计区下方，按差异像素数降序排列，每个区域项显示序号、坐标、尺寸、 差异像素数、密度、平均强度。交互方式：
- 点击列表项：高亮对应区域（差异图上方框选变为红色加粗）， 并自动滚动差异图到可视区域
- 点击差异图上方框：同样可选中对应区域，列表项同步高亮
- 再次点击：取消选中
- 显示/隐藏开关：差异图左下角的复选框可切换框选叠加层的显隐， 便于在"纯净查看差异图"与"定位差异区域"之间切换
所有按钮均满足 WCAG 2.2 触控目标尺寸（≥ 44×44px），列表项支持键盘 Tab 导航与 Enter/Space 激活，aria-pressed 状态标识当前选中项。

批量对比模式适用于一次性对比多对图片的场景，典型用途包括 CI/CD 回归测试 截图批量验证、设计稿多版本对比、A/B 素材批量评估等。使用流程：
- 切换模式：页面顶部点击「批量对比」切换到批量模式
- 上传文件：点击上传区或拖拽多个图片文件（支持 PNG / JPEG / WebP / GIF / BMP / AVIF）， 可多次追加，文件按选择顺序排列
- 自动配对：文件按顺序两两配对（第 1+2、3+4...），文件列表会实时显示 配对预览（如「对1-A」「对1-B」标识每个文件在配对中的角色）
- 调整阈值：与单图模式一致的阈值调节（0-100，三档预设）
- 开始对比：点击「开始批量对比」按钮，队列顺序执行，实时显示进度条 （当前 / 总数），单对失败不影响其他对
- 查看结果：汇总统计区显示总配对数、成功数、失败数、平均差异、最大差异； 下方配对列表点击任意行可展开该对的差异图与详细统计
- 导出报告：点击「导出批量 JSON」下载汇总报告，或展开某对后单独导出该对的 JSON 与差异图 PNG
单次最多支持 50 对（100 个文件），避免浏览器内存压力。

批量对比支持两种配对方式，可在文件列表上方的「配对方式」切换器中选择：
1. 顺序配对（默认）：按用户选择文件的顺序两两配对，第 1 个与第 2 个、第 3 个与第 4 个... 适合文件已按目标配对顺序排列的场景。可通过调整文件选择顺序或移除单个文件来控制配对方式。
2. 前缀配对：按文件名前缀自动分组，同前缀的两两配对。 前缀提取规则：去掉文件扩展名后，取最后一个分隔符（_ - . 空格）之前的部分作为前缀。 例如：logo_v1.png + logo_v2.png → 前缀 logo； homepage-before.png + homepage-after.png → 前缀 homepage； test_001_expected.png + test_001_actual.png → 前缀 test_001。 适合版本对比、before/after 对比、回归测试截图配对等场景，免去手动排序的麻烦。
未配对文件处理：前缀配对模式下，若某前缀分组只有 1 个文件（无同前缀伙伴）， 或某分组文件数为奇数，剩余文件会在文件列表中标记为「未配对」（红色虚线边框），不参与对比。 顺序配对模式下，奇数个文件时最后一个会被忽略并显示警告。
分组超过 2 个文件：前缀配对模式下，若某前缀分组超过 2 个文件 （如 v1、v2、v3），会按文件名排序后顺序两两配对 （v1 vs v2），剩余文件（v3）标记为未配对，并显示警告。
建议工作流：版本对比建议使用前缀配对（如 logo_v1.png + logo_v2.png）； 无明确命名规则时使用顺序配对，并在文件管理器中按目标配对顺序重命名文件后全选拖入。

前缀配对模式下，可在「配对方式」切换器下方的「自定义分隔符」开关中启用自定义分隔符。
自定义分隔符输入：在输入框中输入字符序列，每个字符均作为独立分隔符。 例如输入 _-.@，则文件名中的下划线、连字符、点号、@ 符号都会被识别为分隔符。 最长 16 字符，仅接受可见 ASCII 字符（0x20-0x7E），其他字符会被自动过滤。
转义安全：输入的字符会自动转义字符类内的特殊字符（]、\\、^、-），无需担心注入风险。
留空回退：输入框为空或仅空白时，自动使用默认分隔符（下划线 / 连字符 / 点号 / 空白）。
分组预览：点击「预览分组」按钮可展开所有前缀分组卡片，每张卡片显示： 前缀 key（蓝色左边框，单文件组为红色、超过 2 个文件组为橙色）、文件数量与配对数、 每对配对（A/B 角色标签 + 文件名 + vs 分隔符）、未配对文件（红色「未配对」标签）。
典型场景： - 版本号分隔符：默认 _ - . 已覆盖多数版本命名（logo_v1.png、homepage-2.png） - 自定义符号：使用 @ 或 # 作为分隔符（logo@v1.png vs logo@v2.png → 前缀 logo） - 多字符组合：输入 _-.@# 同时识别多种分隔符 - 调试命名：通过分组预览可快速定位哪些文件因命名问题无法配对

批量对比的 JSON 报告是多对结果的汇总，结构与单图模式有所不同：
- meta（元信息）：生成时间、阈值、网格尺寸、总配对数、成功数、失败数、 平均差异比例、最大差异比例等汇总统计
- items（配对列表）：每个配对项包含序号、图片 A/B 元信息、差异统计、 区域列表（最多 50 个）、错误信息（若有）
与单图 JSON 的关系：批量 JSON 是单图 JSON 的「集合版」，每对的 items[].stats 与 items[].regions 字段结构完全等同于单图模式的 stats 与 regions，便于复用解析逻辑。
CI/CD 集成建议：在自动化测试流水线中，可： 收集本批次所有截图 → 按预期配对顺序上传到本工具批量对比 → 下载批量 JSON → 解析 meta.success / meta.failed 判断整体通过率 → 解析 items[].stats.diffPercent 定位差异最大的配对 → 失败时附上批量 JSON 与差异图作为证据。 文件名格式为 image-compare-batch-YYYYMMDD.json。

ZIP 打包下载是批量对比模式的归档导出能力，将所有成功对比的差异图一次性打包为 ZIP 文件下载，避免逐对展开下载的繁琐操作。
- 触发方式：批量对比完成后（至少 1 对成功），结果区操作栏出现 「下载全部差异图 ZIP」按钮，点击即可在浏览器本地打包下载
- ZIP 内容：每个成功配对的差异图（PNG 格式），文件名格式为 pair-001_<A文件名>__vs__<B文件名>_diff.png； manifest.json（与批量 JSON 导出内容一致，含元信息、统计、区域列表）； README.txt（说明 ZIP 内容与差异图图例）
- 纯本地打包：ZIP 在浏览器中使用原生 API 构造（CRC32 + STORE 模式）， 无第三方依赖、无网络请求，差异图不会上传到任何服务器
- 压缩方式：采用 STORE 模式（无压缩），因为差异图为 PNG（已压缩）， 再用 DEFLATE 压缩收益微小且增加计算开销，STORE 模式打包速度更快
- 文件名安全：源文件名中的特殊字符（\ / : * ? " < > | 及控制字符）会被替换为下划线，文件名长度限制为 40 字符，保证跨平台解压兼容
- 典型用途：CI/CD 回归测试结果归档、设计稿版本对比留档、 A/B 测试素材差异证据收集、批量质量审计报告交付
文件名格式为 image-compare-batch-YYYYMMDD.zip。

差异区域放大查看是差异高亮模式下的细节对比能力，针对小区域或密集差异场景 （如压缩损失、微调改动、像素级回归）的精细化分析需求。
- 触发方式：在差异高亮模式下生成差异图后，差异区域列表中每个区域项右侧 有「🔍 放大」按钮；也可直接双击差异图上的区域矩形快速打开
- 三联对比：modal 内并排展示该区域在图片 A / 图片 B / 差异图 中的放大视图（四周扩展 12px 上下文），便于对照同一坐标在两张图与差异图中的细节
- 放大倍率：提供 1× / 2× / 4× 三档放大倍率切换 （最长边分别为 320 / 640 / 1280px），默认 2×。倍率越高细节越清晰，但内存占用越大； 切换倍率后会自动重新提取三联图。4× 适合像素级回归测试定位单像素差异， 1× 适合快速浏览区域整体上下文
- 下载三联合成图：点击底部「⬇ 下载三联合成图」按钮， 将当前区域的 A / B / 差异图三张放大图水平并排合成为单张 PNG下载 （含标题栏标注「图片 A · 文件名」「图片 B · 文件名」「差异图（红色高亮）」， 白色背景便于打印与文档粘贴），文件名格式为 region-序号-triple-compare.png， 适用于一次性归档、贴入测试报告、分享给团队
- 键盘导航：打开后可使用 ← → 切换上一个 / 下一个区域， ESC 关闭 modal，无需鼠标操作
- 坐标映射：当两张图尺寸不一致时，工具会按差异图尺寸（取较小尺寸）自动映射 到原图坐标系，保证三联图区域严格对齐
- 典型用途：定位压缩算法损失区域、对比设计稿微调、验证 A/B 测试素材差异、 像素级回归测试失败定位