图片差异对比

功能

• 两张图逐像素比较，输出一张差异图
• 差异阈值可调（0–255），低于它的差异忽略
• 可忽略抗锯齿造成的孤立像素，并单独计数
• 变深与变浅的像素分别上色，两色可自定
• 只画差异时输出透明底 PNG，可直接叠在原图上看
• 可放大 1× / 2× / 4× 看细节（最近邻放大，方块清晰不糊边）
• 两张图尺寸不同时直接报错，不会静默按左上角对齐
• 卡片上给出差异像素数、总像素数与占比
• 全部在浏览器里完成，图片不上传

使用方法

1. 一次选中正好两张图
2. 按需要调阈值、配色与放大倍数
3. 拿到差异图，读卡片上的差异占比与忽略计数

常见问题

为什么非要求两张图尺寸一样？

因为差异对比是逐像素对应的：A 的 (100, 50) 与 B 的 (100, 50) 比。尺寸不同时根本没有一一对应关系。技术上可以按左上角把两张图叠起来，但那样多出来的一整条会被判成「B 新增、A 没有」，整片标红，算出来的「差异 90%」与你要找的问题毫无关系 —— 而且它看起来完全合理，比报错难查得多。所以这里宁可报错。请先用裁剪或缩放把两张图做成同样大小。

「忽略抗锯齿」到底忽略了什么？

判据是方向一致性：一个像素真的变了，它的上下左右四邻中至少有一个也在同向变化（同一主导通道、同号）。抗锯齿与重采样造成的差异是孤立的 —— 单个像素在两种颜色之间取了中间值，四周却没有同向的邻居。 所以：成片的差异（整块颜色变了）与成线的差异（一行文字位移 1px）一定有同向邻居，全部保留；只有一个孤立像素不一样时，判为抗锯齿/噪点，忽略并在说明里单独计数。开关关掉时不做这个过滤，所有超过阈值的像素都算差异。

差异占比是怎么算的？

分母是总像素数（宽 × 高），分子是通过了「阈值」与（可选的）「抗锯齿过滤」之后剩下的差异像素数，写成百分比并保留两位小数。卡片上同时给出分子与分母（如 1200 / 2400000 px），所以百分比怎么来的是一目了然的。放大倍数不影响这个比例 —— 它只改变输出图的大小。

透明底的差异图怎么用？

把它下载下来，叠在原来的第一张图上（多数看图软件、设计工具都支持图层叠加），差异处有颜色、其余完全透明，一眼就能看到哪里变了。要直接看「差异 + 原图」的合成结果，把「只画差异」关掉即可 —— 那时差异会直接画在原图（第一张）上。