发现一个宝藏图片对比工具!速度比 ImageMagick 快 6 倍,还是开源的

大家好,我是 Immerse,一名独立开发者、内容创作者、AGI 实践者。

关注公众号:沉浸式趣谈,获取最新文章(更多内容只在公众号更新)

个人网站:yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程独立开发AI干货开源个人思考等内容。

如果本文对您有所帮助,欢迎动动小手指一键三连(点赞评论转发),给我一些支持和鼓励,谢谢!


今天给大家分享一个超牛的图片对比工具 --- Odiff。

不仅速度快到飞起,还完全开源免费。

速度很快

官网拿它和常用的 ImageMagick、pixelmatch 对比了一下。

完整的网页截图:

ImageMagick 要 8.8 秒,pixelmatch 要 7.7 秒。

Odiff?1.2 秒搞定。

快了 6 倍不止。

更夸张的是 8K 大图对比:

别的工具要 9-10 秒,Odiff 只要 2 秒。

技术方面

Odiff 最早用 OCaml 写的,现在用 Zig 重写了。

支持 SSE2、AVX2、AVX512 和 NEON。

直接榨干 CPU 的并行计算能力,一次处理多个像素。

难怪能这么快。

功能很全

快归快,功能没缩水。

跨格式对比随便玩,jpg 和 png 直接比,不用转格式。

支持的格式也多:png、jpg、jpeg、webp、tiff 全都行。

抗锯齿检测、区域忽略这些高级功能也有。

用的是 YIQ NTSC 算法,判断视觉差异更准确。

不同布局的图片也能对比。

输出结果很详细,差异像素数量、百分比、对比图都给你生成好。

上手超简单

装个 npm 包就能用:

bash 复制代码
npm install odiff-bin

然后直接用命令行:

bash 复制代码
odiff base.png compare.png diff.png

第三个参数是输出的对比图,可以不写。

如果你想在 Node.js 代码里用,也很简单:

js 复制代码
const { compare } = require('odiff-bin');

const { match, reason } = await compare('path/to/first.png', 'path/to/second.png', 'path/to/diff.png');

console.log(match); // true 或 false
console.log(reason); // 不匹配的原因

返回结果会告诉你图片是否匹配。

如果不匹配,会给出原因:是像素差异,还是布局不同。

还有差异像素数量和差异百分比。

还有个服务器模式

对比大量图片的话,推荐用服务器模式。

Odiff 提供了服务器模式。

它会启动一个常驻进程,多次对比都用同一个进程,省去了启动开销。

Node.js 里用起来也很简单:

js 复制代码
const { ODiffServer } = require('odiff-bin');

const server = new ODiffServer();

const result1 = await server.compare('a.png', 'b.png', 'diff1.png');
const result2 = await server.compare('c.png', 'd.png', 'diff2.png');

server.stop();

还可以设置超时时间,防止某个对比卡住:

js 复制代码
await server.compare('a.png', 'b.png', 'diff.png', {
    threshold: 0.3,
    timeout: 5000,
});

服务器模式还会自动根据 CPU 核心数并行处理。

多个测试用例同时跑也不会阻塞。

集成也很方便

用 Playwright 的话,有专门的插件:

bash 复制代码
npm install playwright-odiff

然后在测试文件里:

js 复制代码
import 'playwright-odiff/setup';

expect(page).toHaveScreenshotOdiff('screenshot-name');

Cypress 也有对应的插件 cypress-odiff。

还有很多视觉回归测试服务直接集成了 Odiff。

比如 LostPixel、Argos CI、Visual Regression Tracker。

Argos CI 之前发推说,换到 Odiff 之后速度提升了 8 倍。

完全开源免费

Odiff 是 MIT 协议的开源项目。

代码全在 GitHub 上,维护也很活跃。

提供预编译的二进制文件,Windows、Mac、Linux 都支持。

npm 安装的话,会自动下载对应平台的版本,不用操心。

写在最后

做视觉回归测试,或者平时需要对比图片的话。

强烈推荐试试 Odiff。

速度快到飞起,功能还全,开箱即用。

关键还是开源免费的,良心。

项目地址:github.com/dmtrKovalen...

相关推荐
jayaccc1 天前
Webpack配置详解与实战指南
前端·webpack·node.js
前端小黑屋1 天前
查看 Base64 编码的字体包对应的字符集
前端·css·字体
每天吃饭的羊1 天前
媒体查询
开发语言·前端·javascript
XiaoYu20021 天前
第8章 Three.js入门
前端·javascript·three.js
这个一个非常哈1 天前
element之,自定义form的label
前端·javascript·vue.js
阿东在coding1 天前
Flutter 测试框架对比指南
前端
是李嘉图呀1 天前
npm推送包失败需要Two-factor权限认证问题解决
前端
自己记录_理解更深刻1 天前
本地完成「新建 GitHub 仓库 react-ts-demo → 关联本地 React+TS 项目 → 提交初始代码」的完整操作流程
前端
借个火er1 天前
Chrome 插件开发实战:5 分钟上手 + 原理深度解析
前端