MergeImage · 最后验证 2026-08-04
支持三种视图的本地图片对比工具
使用这款图片对比工具,可以并排查看两张图片、拖动滑块检查前后变化,或按阈值生成像素差异图。两张图会进入同一个比较画框,标签可修改,整个过程无需把原图上传到服务器。
- 三种图片对比模式
- 变化像素百分比
- 本地导出PNG
两张图片的隐私工作区
不用上传即可对比两张图片两张原图只保留在当前浏览器标签页。
添加两张图片后即可开始对比。
指南
阅读实用指南
本页使用的一手资料与官方资料。
01
图片对比工具如何建立一致的检查画框
图片对比 — 并排、滑块和像素差异都使用同一套画面尺寸
先选择一张原图和一张修改后的图片。图片对比工具会在本地解码两个文件,计算共同画框,再按原比例完整放入画框,不主动裁掉边缘。即使两张原图的尺寸或长宽比不同,三种图片对比模式仍然从同一个几何基准开始。
图片对比 — 并排模式适合查看整体构图变化;滑块模式会叠放两个画框,并在分隔线之前显示修改后的版本;差异模式则读取两张画框的RGBA像素,比较三个颜色通道,把平均变化超过所选阈值的像素高亮出来。
图片对比 — 变化百分比只描述标准化画框中的像素,不代表修改质量,也不能解释变化原因。缩放、压缩、抗锯齿、色彩配置以及一个像素的位置偏移,都可能造成大量数值变化。应把测量结果、肉眼检查和原始文件的使用场景结合起来判断。
- 布局、商品、装修与前后效果适合使用并排图片对比。
- 图片对比 — 相同位置的细节变化适合使用拖动滑块。
- 图片对比 — 差异模式用于定位变化像素,不用于推断变化原因。
- 当前图片对比视图和自定义标签可以一起导出为PNG。
| 模式 | 适合任务 | 输出结构 | 测量结果 |
|---|---|---|---|
| 图片对比 — 并排 | 整体视觉检查 | 两个等大画框 | 不计算分数 |
| 图片对比 — 滑块 | 前后效果检查 | 一个叠加画框 | 分隔线位置 |
| 图片对比 — 差异 | 定位像素变化 | 一个热力图画框 | 阈值与变化比例 |
02
根据问题选择图片对比方式
图片对比 — 视觉叙事与像素检查需要不同视图
商品展示可以把正面、侧面、细节和尺寸参照放进网格;客服报告可以把报错与复现步骤纵向排列;设计评审可以在相同背景和间距下横向比较不同方案。
03
图片对比 — 让隐私图片留在浏览器本地
图片对比 — 本地File与Canvas API避免处理型上传
浏览器只读取用户明确选择的文件,解码兼容图片并在本地Canvas上生成结果。核心流程不需要账号、远程处理队列或付费API,发送给MergeImage服务器的原图数量为0。
04
导出清楚可读的图片对比结果
图片对比 — 标签、背景与画框结构都会保留
PNG适合文字、界面截图和透明背景;JPEG通常更适合照片和广泛兼容的上传入口,但采用有损压缩且不保留透明;WebP在目标平台明确支持时可以兼顾画质与大小。
05
这款图片对比工具如何验证
图片对比 — 官方浏览器API与可复现像素测试
MDN说明createImageBitmap()和canvas.toBlob()的浏览器行为,W3C File API定义文件选择对象。这些官方资料支持底层技术事实,但不构成对MergeImage的认证,也不保证所有设备性能相同。
06
图片对比 — 先确定阅读顺序
图片对比 — 让布局服从图片要表达的内容
图片对比 — 图片合并应从最终顺序开始。文件列表决定输出顺序,你可以移动或删除项目而不修改原图。横向适合并排比较,纵向适合步骤,网格适合成组展示,智能长截图适合具有稳定重复区域的连续屏幕。
图片对比 — 保持原尺寸能够保留像素,统一宽度或高度便于对齐,等大单元格适合规则网格。间距、对齐、背景和透明度都在导出前计算,预览可以帮助发现顺序、留白或比例问题。
最后验证 · 2026-08-04
产品事实
本页使用的一手资料与官方资料。
- 解码、排列和编码都在当前浏览器本地运行,发送到MergeImage服务器的原始图片文件为0个。
- 工作区最多接收30张图片、单个文件20MB。当前设备采用最高12,000px / 80MP的安全预算;超大图片合并或长截图拼接结果可默认等比缩小,也可保留原尺寸并分段打包为ZIP。
- 经验证的版本提供横向、纵向、网格、智能长截图4种布局和PNG、JPEG、WebP 3种输出格式,验证日期为2026-08-03。
| 产品事实 | 资料来源 | 最后验证 |
|---|---|---|
| 30 | 产品事实 | 2026-08-04 |
| 20 MB | 产品事实 | 2026-08-04 |
| 12,000 px / 80 MP | 产品事实 | 2026-08-04 |
“The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas.”
资料来源
- Window:createImageBitmap() — MDN Web Docs
- HTMLCanvasElement:toBlob() — MDN Web Docs
- CanvasRenderingContext2D.getImageData() — MDN Web Docs
- File API规范 — W3C
常见问题
图片对比时会上传我的文件吗?
不会。文件选择、解码、Canvas绘制、像素读取与PNG导出都在当前标签页执行。
图片对比 — 变化像素百分比表示什么?
它表示标准化画框内,RGB平均变化超过所选阈值的像素占比。
图片对比 — 尺寸不同的图片可以对比吗?
可以。两张图都会保持原比例、完整放入同一个画框,多余区域使用所选背景。
图片对比 — 前后效果照片应该使用哪种模式?
主体与构图一致时先用滑块;取景不同或需要完整展示时使用并排模式。
图片对比结果可以下载吗?
可以。当前并排、滑块或差异视图都能连同可见标签导出为PNG。