npm 包 @bouzuya/compare-images 使用教程

阅读时长 3 分钟读完

介绍

@bouzuya/compare-images 是一个 npm 包,可以帮助开发人员比较两张图片的相似性。该包基于 js 比较算法实现,提供了快速、准确的比较能力,支持透明背景。本文将详细介绍该 npm 包的使用。

安装

可以通过 npm 命令安装该包:

使用

基础使用

-- -------------------- ---- -------
----- ------------- - -----------------------------------

----- ------- - - ---------- --- --
----- ---- - --------------
  ----------------------
  ----------------------
  -------
--

------------------- - - -------------------------

参数说明

比较两张图片时,可以传入一些可选参数,以控制比较过程:

  • threshold:number 设置相似度阈值,范围为 0 到 1 之间的浮点数,默认为 0.1,超出该值后认为两张图片不相似
  • ignoreColors:bool 是否忽略颜色进行比较,默认为 false,不忽略颜色
  • alpha:bool 是否考虑透明度,即支持透明背景。注意,支持透明背景会增加计算量,默认为 false

结果说明

compareImages 函数返回一个对象,该对象包含以下属性:

  • misMatchPercentage:number 表示两张图片之间的差异率,取值为 0 到 1 的浮点数。该值越小表示两张图片之间越相似
  • isSameDimensions:bool 两张图片是否具有相同的尺寸
  • dimensionDifference:{width:number, height:number} 两张图片尺寸之间的差异

示例代码

比较两张相同的图片,得到 0 的差异率

-- -------------------- ---- -------
----- ------------- - -----------------------------------

----- ------- - - ---------- --- --
----- ---- - --------------
  ----------------------
  ----------------------
  -------
--

------------------- - - -------------------------

输出结果:

比较两张不同的图片,得到非 0 的差异率

-- -------------------- ---- -------
----- ------------- - -----------------------------------

----- ------- - - ---------- --- --
----- ---- - --------------
  ----------------------
  ----------------------
  -------
--

------------------- - - -------------------------

输出结果:

总结

@bouzuya/compare-images 是一个方便实用的 npm 包,可以快速、准确地比较两张图片的相似性。通过本文的介绍,您已经学习了该包的安装和使用方法,掌握了比较过程中可用的参数、以及返回结果的含义。希望本文能够对您的前端开发工作有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005725881e8991b448e8736

纠错
反馈