MergeImage · 最后验证 2026-08-04

支持三种视图的本地图片对比工具

使用这款图片对比工具,可以并排查看两张图片、拖动滑块检查前后变化,或按阈值生成像素差异图。两张图会进入同一个比较画框,标签可修改,整个过程无需把原图上传到服务器。

两张图片的隐私工作区

不用上传即可对比两张图片

两张原图只保留在当前浏览器标签页。

对比前图片 拖入PNG、JPEG或WebP
对比后图片 拖入PNG、JPEG或WebP

可以添加两张图片。

图片对比模式
图片对比结果

添加两张图片后即可开始对比。

添加两张图片后即可开始对比。

指南

阅读实用指南

本页使用的一手资料与官方资料。

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.”

资料来源

  1. Window:createImageBitmap() — MDN Web Docs
  2. HTMLCanvasElement:toBlob() — MDN Web Docs
  3. CanvasRenderingContext2D.getImageData() — MDN Web Docs
  4. File API规范 — W3C

常见问题

图片对比时会上传我的文件吗?

不会。文件选择、解码、Canvas绘制、像素读取与PNG导出都在当前标签页执行。

图片对比 — 变化像素百分比表示什么?

它表示标准化画框内,RGB平均变化超过所选阈值的像素占比。

图片对比 — 尺寸不同的图片可以对比吗?

可以。两张图都会保持原比例、完整放入同一个画框,多余区域使用所选背景。

图片对比 — 前后效果照片应该使用哪种模式?

主体与构图一致时先用滑块;取景不同或需要完整展示时使用并排模式。

图片对比结果可以下载吗?

可以。当前并排、滑块或差异视图都能连同可见标签导出为PNG。