← 返回列表

新工具 GitHub · M1chaelChen/diffglow

用 Diffglow 对比前后两张截图，得到带高亮差异的结果图

给同一界面的 before/after 两张截图，得到一张未变区域保持原色、变化像素被 65% 高亮叠加的结果 PNG，并打印变更像素数与百分比。

开始尝试

效果

原站没有结果截图以外的可交互演示；README 展示了一张示例 demo 图并链接到浏览器截图示例目录，结果形态为高亮差异 PNG 与 HTML 报告。

这是什么

新在哪里：以前对比前后截图要靠肉眼或像素快照断言加人工审批基线；现在一条 npx 命令即可本地生成差异高亮图并输出统计。

怎么做到的：用 npx --yes diffglow@alpha before.png after.png --output highlighted.png 跑比对；按需用 --threshold 调灵敏度、--ignore-region 排除时钟等动态区域、--html 生成离线审阅页；也可把项目内置的 skill 加到编码 agent，让它在已有 Playwright / Maestro E2E 截图后做视觉比对。

适合谁
需要在前端或移动端改动后快速核对界面视觉差异、且已能产出截图的前端与测试工程师。
能帮你
把“两个截图差在哪”变成一张一眼可见的高亮图加统计数字，且图片全程留在本机。

评分 三项分开看，不合成总分；热度不等于好用

新颖性
全新做法 · 2026-10-17 出现
热度
未知
易上手
很容易上手
怎么评的

三项都由本站记录的事实按固定规则算出，编辑不能直接改档位；规则改动会写进更新说明。

新颖性

  • ●●● 全新做法，且有来源依据的出现时间在最近 30 天内
  • ●●○ 老工具新用法或近期刚开放，且有来源依据的时间在最近 30 天内
  • ●○○ 出现时间超过 30 天、未核实到精确日期，或已不再是新做法
  • 其他 出现时间未核实、晚于今天，或新颖类型未核实时按最低一档处理，不靠猜测加分

热度

  • ●●● 最近一次每周人工确认为“热门”：最近 14 天里独立讨论、实际案例、持续时间、传播平台、相对关注五项门槛全部满足（规则 heat-v1）
  • ●●○ 最近一次人工确认为“观察中”：前三项至少一项达到，或讨论增长 ≥ 50%，且至少 2 个独立案例
  • ●○○ 最近一次人工确认为“未进入跟踪”
  • 其他 还没有人工确认过的热度记录时显示“未知”。热度只统计本站已接入的信源，不代表全网

易上手

  • ●●● 准备门槛低且难度入门：不需要新账号或付费，首次尝试不超过 30 分钟，公开可用，会复制粘贴即可
  • ●●○ 准备门槛中等，或门槛低但需要改少量代码或配置
  • ●○○ 准备门槛高：需要商业软件或付费服务、首次尝试超过 2 小时、特殊硬件或网络、排队或邀请且无替代方案，或需要专业知识
  • 其他 只有介绍、还没有站内步骤，或关键步骤已失效时显示“暂不可试”；门槛未核实时显示“未核实”

怎么尝试

  • 时间 首次约 5 分钟
  • 费用 免费：项目以 Apache-2.0 开源，通过 npx / npm 本地运行，原站未说明任何费用。
  • 账号 不需要新账号
  • 环境 Node.js 22 或更新版本；Linux / macOS / Windows；无需浏览器以外的在线服务，不需要 API 密钥。
  • 准备 Node.js 22+：运行 npx diffglow@alpha 或全局安装命令行
  • 准备 前后两张截图（PNG 或 JPEG）：作为比对输入，PNG 与 JPEG 可混用
  • 准备 终端：执行 npm/npx 命令

按下面的步骤就能做出第一个结果。复制命令不会自动执行。

  1. 确认 Node.js 版本

    Diffglow 需要 Node.js 22 或更新版本，先确认本机 node 版本满足要求。

    bash本站编写 
    node -v

    预期结果：输出 v22.x 或更高版本号

  2. 准备两张待比对截图

    把改动前和改动后的同一界面截图放到工作目录，例如 before.png 与 after.png；PNG 与 JPEG 可混用，路径含空格时用引号包住。

    预期结果：目录中存在两张对应同一界面的截图

  3. 跑第一次比对

    用 npx 直接运行 Alpha 版本，对比两张截图并输出高亮结果图。

    bash原始来源命令 
    npx --yes diffglow@alpha before.png after.png --output highlighted.png

    预期结果：命令打印变更像素数、变更百分比与输出文件绝对路径，并生成 highlighted.png

  4. （可选）改用全局安装的命令

    如果会反复使用，全局安装后可直接调用 diffglow 命令。

    bash原始来源命令 
    npm install --global diffglow@alpha

    预期结果：安装完成，终端中可直接执行 diffglow --help 查看选项

  5. 排除状态栏时钟等动态区域

    对含固定变化元素的截图，用忽略区域把该矩形排除在比较之外；忽略区域内的像素不计入 changed、unchanged 和 compared 计数。

    bash原始来源命令 
    diffglow before.png after.png --ignore-region '0,0,160,60' -o highlighted.png

    预期结果：时钟所在区域不再高亮，其像素不参与统计；由于这些像素原本可能被判为变更或未变，报告的变更像素数与变更百分比可能下降、不变或上升，需结合 JSON 或 HTML 报告中的忽略区域与忽略像素数判断

  6. （可选）把 skill 接入编码 agent

    在项目内安装为开发依赖，再用 Skills CLI 安装自带 skill，让 agent 在已有 E2E 截图后做视觉比对。

    bash原始来源命令 
    npx skills add ./node_modules/diffglow/skills/diffglow --skill diffglow

    预期结果：提示选择编码 agent，安装后 agent 可按 intent → existing E2E captures → evidence → agent feedback → rerun 的流程报告已验证效果、缺陷与不确定处

原始来源：Diffglow：给 Playwright/Maestro 截图做视觉 diff 的 agent skill ↗