图片对比
上传两张图片并排对比显示，支持叠加对比、差异高亮，用于设计稿校验和图片版本对比。
图片对比
点击上传图片 A
点击上传图片 B
请先上传两张图片
图片对比工具使用指南
📌 简介
图片对比工具是一款面向设计师和开发者的在线工具，可以并排、叠加或差异高亮的方式对比两张图片，快速识别视觉差异。在设计稿验收、版本迭代对比、UI 还原度检查、图片压缩前后对比等场景中非常实用。所有处理在浏览器本地完成，图片不会上传服务器。
📖 三种对比模式的区别
并排对比： 将两张图片左右并排显示，适合观察整体差异和构图变化。叠加对比： 将两张图片以 50% 透明度叠加，适合检查设计稿与实现效果的细微偏移。差异高亮： 逐像素比较两张图片，将差异部分标为红色、相同部分转为灰度，能精确显示差异位置和范围。不同模式适合不同的对比场景。
💼 常见应用场景
- UI 还原度检查： 对比设计稿与实际页面截图，找出偏差。
- 版本对比： 比较新旧版本的界面变化。
- 图片压缩验证： 对比压缩前后图片的差异，评估压缩质量。
- 像素级调试： 检查图片渲染是否与预期一致。
- 水印检测： 对比原图与添加水印后的图片，确认效果。
⚙️ 使用步骤
- 点击左侧上传图片 A（原图或参考图）。
- 点击右侧上传图片 B（对比图或新版本）。
- 选择对比模式（并排、叠加、差异高亮）。
- 点击"开始对比"查看结果。
- 差异高亮模式会统计不同像素数量，帮助量化差异程度。
⚠️ 注意事项
- 两张图片尺寸不一致时，以最大宽高为准，较小图片周围会留白。
- 差异高亮模式使用 RGB 差值之和大于 30 作为阈值，可以过滤微小色差。
- 并排对比输出宽度是两张图片宽度之和，建议先等比缩小图片。
❓ 常见问题 (FAQ)
Q: 差异高亮的红色区域越大代表差异越大吗？
A: 是的。红色区域表示像素差异超过阈值的位置，红色越多表示差异越大。如果整张图几乎没有红色，说明两张图片几乎完全一致。
Q: 支持透明图片对比吗？
A: 支持。透明区域会被视为白色背景处理。如需精确对比透明通道，建议使用专业图像工具。
Q: 图片会上传吗？
A: 不会。所有对比在浏览器本地完成，图片不会离开您的设备。