图片对比工具

什么是图片对比工具？

如何使用图片对比工具

1. 1

   上传第一张图：点击页面左侧的『选择图片』上传区域，在本地文件夹中选中需要对比的第一张主体图片，等待图片加载完成后再进行下一步操作

2. 2

   上传第二张图：点击页面右侧的『选择图片』上传区域，选中你需要用来对比差异的第二张图片，确认后等待页面完成加载即可

3. 3

   调整对比方向：根据两张图片的长宽比例，点击对应按钮切换水平或者垂直对比模式，适配图片显示比例获得更好观察效果

4. 4

   拖动滑块查看：用鼠标按住页面中间的对比滑块，沿着对比方向缓慢拖动，就能同步显示两张图片对应区域的内容差异

什么场景会用到？

计算示例

注意事项

• 请确保两张对比图片的主体位置大致对齐，错位过大可能会影响对比观看体验。
• 支持常见的JPG、PNG、WebP等浏览器可读图片格式，不支持动图和HEIC格式直接上传。
• 对比生成后仅在当前浏览器页面生效，刷新页面后需要重新上传图片生成新对比。
• 两张图片尺寸差异过大时，工具会自动统一尺寸适配，不改变原图片文件本身。

常见问题

参考资料

• W3C HTML Canvas 2D Context 规范
• MDN Web Docs 触摸事件相关文档

本页工具采用浏览器原生Canvas绘图能力实现滑动对比功能，所有交互逻辑符合W3C标准规范，功能逻辑经工具集编辑组验证测试，可正常使用。