大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 ODiff

The fastest* (one-thread) pixel-by-pixel image difference tool in the world.

ODiff 是一款速度极快的原生图像比较工具，其会以毫秒为单位比较两幅图像之间的视觉差异。 ODiff 最初是为了处理 “大” 图像而设计的，借助 OCaml 及其快速且可预测的编译器，开发者可以显著加快 CI 管道。

OCaml：一种工业强度的函数式编程语言，强调表现力和安全性

ODiff 具有以下特征：

• ? 跨格式比较 ： 支持 .jpg 与 .png 比较
• ? 支持 .png、.jpeg、.jpg 和 .tiff
• ? 支持不同布局的图像比较
• ? 抗锯齿检测
• ? 忽略区域
• ? 使用 YIQ NTSC 传输算法来确定视觉差异
• ? 速度非常快，比 pixelmatch、ImageMagick 等更快，几乎是后者的 6 倍以上
• ? 从内存缓冲区读取图像（待实现）
• ? 从 url 读取图像（待实现）

注意：pixelmatch、ImageMagick的对比数据来自对同一个图片的测试，命令如下：

1.pixelmatch www.cypress.io-1.png www.cypress.io.png www.cypress-diff.png

2.ImageMagick compare www.cypress.io-1.png www.cypress.io.png -compose src diff-magick.png

3.odiff www.cypress.io-1.png www.cypress.io.png www.cypress-diff.png

目前 ODiff 在 Github 通过 MIT 协议开源，有超过 2k 的 star、160 + 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 ODiff

安装 ODiff 的推荐跨平台方法是 npm 和 node.js。 确保该包直接编译为平台二进制可执行文件，以便 npm 包包含所有二进制文件，并且安装后脚本将自动链接当前平台的正确二进制文件。

npm install odiff-bin
odiff --help
// 注意：包名称是 odiff-bin。但二进制文件本身是 odiff

安装后即可快速使用，比如：下面命令用于运行简单的比较。图像路径可以是支持的格式之一，diff 输出只能是 .png。

odiff <IMG1 path> <IMG2 path> <DIFF output path>

同时库还为 odiff 提供直接的 node.js 绑定，比如下面从 nodejs 运行 odiff：

const {compare} = require("odiff-bin");
const {match, reason} = await compare(
  "path/to/first/image.png",
  "path/to/second/image.png",
  "path/to/diff.png"
);

如果图像相同，compare 方法将返回 {match: true} 否则返回 { match: false, Reason: "*" } 以及图像不同的原因。这样，可以确保仅当图像具有可以看到的像素差异时才会创建 diff 输出文件。

同时，开发者还可以集成 cypress-odiff，其是一个使用 odiff-bin 添加视觉回归测试的 cypress 插件，是世界上最快的逐像素图像视觉差异工具。

参考资料

https://github.com/dmtrKovalenko/odiff

https://github.com/odai-alali/cypress-odiff

https://ocaml.org/