blink-diff中文文档|blink-diff js中文教程|解析

npm npmdoc 2年前 (2021-12-30) 659次浏览

blink-diff中文文档|blink-diff js中文教程|解析

安装命令:npm i blink-diff

闪烁差异

一个轻量级的图像比较工具

构建状态
工作服覆盖范围
代码气候等级

NPM 版本
NPM 许可证

新产品管理
新产品管理

覆盖率报告
API 文档

Gitter 支持

目录

图像比较和结果

作品

安装

使用以下命令安装此模块:

npm install blink-diff

将模块添加到您的package.json依赖项中:

npm install --save blink-diff

将模块添加到您的package.json开发依赖项:

npm install --save-dev blink-diff

用法

该包可以以两种不同的方式使用:

  • 每个命令行
  • 通过一个对象

命令行使用

命令行工具可以在bin目录中找到您可以使用

blink-diff --output <output>.png <image1>.png <image2>.png

使用image1image2作为要比较的图像。目前仅支持 PNG。

命令行工具公开了几个用于比较的标志和参数:

--verbose           Turn on verbose mode
--debug             Turn on debug mode - leaving all filters and modifications on the result
--threshold p       Number of pixels/percent 'p' below which differences are ignored
--threshold-type t  'pixel' and 'percent' as type of threshold. (default: pixel)
--delta p           Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)
--copyImageA        Copies first image to output as base. (default: true)
--copyImageB        Copies second image to output as base.
--no-copy           Doesn't copy anything to output as base.
--output o          Write difference to the file 'o'
--filter f          Filters f (separated with comma) that will be applied before the comparison.
--no-composition    Turns the composition feature off
--compose-ltr       Compose output image from left to right
--compose-ttb       Compose output image from top to bottom
--hide-shift        Hides shift highlighting (default: false)
--h-shift           Acceptable horizontal shift of pixel. (default: 0)
--v-shift           Acceptable vertical shift of pixel. (default: 0)
--block-out x,y,w,h Block-out area. Can be repeated multiple times.
--version           Print version
--help              This help

对象使用

该包也可以直接在代码中使用,而无需通过命令行。

例子:

var diff = new BlinkDiff({
    imageAPath: 'path/to/first/image', // Use file-path
    imageBPath: 'path/to/second/image',
 
    thresholdType: BlinkDiff.THRESHOLD_PERCENT,
    threshold: 0.01, // 1% threshold
 
    imageOutputPath: 'path/to/output/image'
});
 
diff.run(function (error, result) {
   if (error) {
      throw error;
   } else {
      console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');
      console.log('Found ' + result.differences + ' differences.');
   }
});

命令行工具中可用的所有参数也可通过类构造函数使用,但它们可能使用略有不同的措辞。该类公开了命令行中不可用的其他参数:

  • imageAPath 定义应该比较的第一个图像的路径(必需;需要 imageAPath 或 imageA – 请参见下面的示例)
  • imageA 提供应该比较的第一个图像(必需;需要 imageAPath 或 imageA – 请参见下面的示例)-这可以是 PNGImage 实例或具有 PNG 数据的 Buffer 实例
  • imageBPath 定义应比较的第二个图像的路径(必需;需要 imageBPath 或 imageB – 请参见下面的示例)
  • imageB 提供应该比较的第二个图像(必需;需要 imageBPath 或 imageB – 请参见下面的示例)-这可以是 PNGImage 实例或具有 PNG 数据的 Buffer 实例
  • imageOutputPath定义输出文件的路径。如果您关闭此功能,则此功能将被关闭。
  • imageOutputLimit定义何时应创建图像输出。这可以针对不同的图像、相似或不同的图像或所有比较。(默认:BlinkDiff.OUTPUT_ALL)
  • verbose 详细输出(默认值:false)
  • thresholdType阈值检查的类型。这可以是 BlinkDiff.THRESHOLD_PIXEL 和 BlinkDiff.THRESHOLD_PERCENT(默认值:BlinkDiff.THRESHOLD_PIXEL)
  • threshold 忽略差异的像素数/百分比 p(默认值:500) – 对于百分比阈值:1 = 100%,0.2 = 20%
  • delta不会触发差异的 4 维颜色空间中颜色坐标之间的距离。(默认:20)
  • outputMaskRed 输出文件中差异突出显示的红色强度(默认值:255)
  • outputMaskGreen 输出文件中差异突出显示的绿色强度(默认值:0)
  • outputMaskBlue 输出文件中差异突出显示的蓝色强度(默认值:0)
  • outputMaskAlpha 输出文件中差异突出显示的 Alpha 强度(默认值:255)
  • outputMaskOpacity 输出文件中差异突出显示的像素不透明度(默认值:0.7 – 略微透明)
  • outputShiftRed 输出文件中偏移突出显示的红色强度(默认值:255)
  • outputShiftGreen 输出文件中偏移突出显示的绿色强度(默认值:165)
  • outputShiftBlue 输出文件中偏移突出显示的蓝色强度(默认值:0)
  • outputShiftAlpha 输出文件中偏移突出显示的 Alpha 强度(默认值:255)
  • outputShiftOpacity 输出文件中移位突出显示的像素的不透明度(默认值:0.7 – 略微透明)
  • outputBackgroundRed 输出文件中背景的红色强度(默认值:0)
  • outputBackgroundGreen 输出文件中背景的绿色强度(默认值:0)
  • outputBackgroundBlue 输出文件中背景的蓝色强度(默认值:0)
  • outputBackgroundAlpha 输出文件中背景的 Alpha 强度(默认值:未定义)
  • outputBackgroundOpacity 输出文件中背景像素的不透明度(默认值:0.6 – 透明)
  • blockOut 在测试之前应阻止的具有坐标的对象或对象列表。
  • blockOutRed 输出文件中块的红色强度(默认值:0)此颜色仅在打开调试模式时在结果中可见。
  • blockOutGreen 输出文件中块的绿色强度(默认值:0)此颜色仅在调试模式打开时在结果中可见。
  • blockOutBlue 输出文件中块的蓝色强度(默认值:0)此颜色仅在打开调试模式时在结果中可见。
  • blockOutAlpha 输出文件中块的 Alpha 强度(默认值:255)
  • blockOutOpacity 输出文件中块的像素的不透明度(默认值:1.0)
  • copyImageAToOutput在比较开始之前将第一个图像复制到输出图像。这将确保输出图像将突出显示第一张图像上的差异。(默认)
  • copyImageBToOutput在比较开始之前将第二个图像复制到输出图像。这将确保输出图像将突出显示第二个图像上的差异。
  • filter将在比较之前应用的过滤器。可用的过滤器有:模糊、灰度、亮度、亮度、亮度、棕褐色
  • debug设置后,应用的过滤器将显示在输出图像上。(默认值:false)
  • composition 创建所有三个图像(已批准、突出显示和构建)的合成作为输出(默认值:true)
  • composeLeftToRight 从左到右创建比较组合,否则它让应用程序决定什么是最好的
  • composeTopToBottom 从上到下创建比较组合,否则它可以让应用程序决定什么是最好的
  • hShift 可能的抗锯齿的水平移位(默认值:2)设置为 0 以将其关闭。
  • vShift 可能的抗锯齿的垂直移位(默认值:2)设置为 0 以关闭此功能。
  • hideShift使用背景颜色“突出显示”转变。(默认值:false)
  • cropImageA 裁剪第一张图片(默认:不裁剪) – 格式:{ x:, y:, width:, height: }
  • cropImageB 裁剪第二张图片(默认:不裁剪) – 格式:{ x:, y:, width:, height: }
  • perceptual打开感知比较模式。请参阅下面的详细信息。
  • gamma 所有颜色的 Gamma 校正(将用作基础)(默认值:无)-此处的任何值都将打开感知比较模式
  • gammaR 红色的伽玛校正 – 此处的任何值都会打开感知比较模式
  • gammaG 绿色的 Gamma 校正 – 此处的任何值都会打开感知比较模式
  • gammaB 蓝色伽玛校正 – 此处的任何值都会打开感知比较模式

例子:

var firstImage = PNGImage.readImage('path/to/first/image', function (err) {
 
  if (err) {
    throw err;
  }
 
  var diff = new BlinkDiff({
      imageA: srcImage, // Use already loaded image for first image
      imageBPath: 'path/to/second/image', // Use file-path to select image
 
      delta: 50, // Make comparison more tolerant
      
      outputMaskRed: 0,
      outputMaskBlue: 255, // Use blue for highlighting differences
      
      hideShift: true, // Hide anti-aliasing differences - will still determine but not showing it
 
      imageOutputPath: 'path/to/output/image'
  });
 
  diff.run(function (error, result) {
    if (error) {
      throw error;
    } else {
      console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');
      console.log('Found ' + result.differences + ' differences.');
    }
  });
});

裁剪

可以在使用cropImageAcropImageB参数进行比较之前裁剪图像可以省略单个值,系统将计算正确的尺寸。然而,x/y坐标优先于width/height因为位置通常比尺寸更重要 – 图像也会在需要时被系统裁剪。

感性比较

感知比较模式考虑了人脑对颜色的感知。它将所有颜色转换为人类感知的颜色空间,这与典型的物理绑定 RGB 颜色空间大不相同。在那里,在感知色彩空间中,颜色之间的距离取决于人类的感知,因此应该更接近人类看到图像时所感知的差异。

日志记录

默认情况下,记录器不会在任何地方记录事件,但您可以通过覆盖来更改此行为blinkDiff.log

var blinkDiff = new BlinkDiff({
    ...
});
 
blinkDiff.log = function (text) {
    // Do whatever you want to do
};
 
...

阻挡

有时,需要在图像中遮挡一些在比较时应该忽略的特定区域。例如,这可以是随时间变化的 ID 甚至时间标签。向图像中添加块可能会减少误报,从而稳定这些比较。

可以通过 API 参数选择块的颜色。但是,默认情况下,屏蔽区域将不可见 – 即使使用了它们,它们也会隐藏。要使它们可见,请打开调试模式。

例子

examples文件夹中有一些示例,其中我使用 YDN 的屏幕截图来检查视觉回归(并对 dom 进行了一些手动修改以显示差异;-))。您可以找到以下示例:

  • 颜色变化 YDN_Color
  • 缺少 DOM 元素YDN_Missing(包括一些抗锯齿)
  • 多重差异 YDN_Multi
  • 分拣中断 YDN_Sort
  • 交换项目YDN_Swap(包括封锁区域)
  • 文字大写 YDN_Upper

所有屏幕截图都与YDN.png之前批准的没有回归的屏幕截图进行了比较每个回归都有截图和输出结果,突出显示差异。

API-文档

使用以下命令生成文档:

npm run docs

文档将docs在模块根目录文件夹中生成

测试

使用以下命令运行测试:

npm run test

代码覆盖将写入coverage模块根目录中的文件夹。

项目重点

图像比较分为三种类型:

  • 逐像素 – 用于比较低频图像,如网站截图,确保小的样式差异触发
  • 感知 – 用于比较图像创建应用程序,例如渲染引擎和照片处理应用程序将人类感知考虑在内,忽略人类可能看不到的差异
  • 上下文 – 用于查看图像的某些部分是否丢失或严重扭曲,但接受较小和/或感知差异

Blink-Diff 最初是为了比较屏幕截图而创建的。这些图像通常是低频的,这意味着与照片相比,具有相同颜色和更少梯度的区域更大。选择逐像素比较是因为它会触发人类可能无法看到的差异。我们相信,即使人类不会看到一个错误仍然是一个错误 – 可能发生了非预期的回归。感知比较不会引发细微的差异,可能会遗漏可能会在未来变得更糟的问题。逐像素比较具有触发过于频繁、增加人工、手动检查图像的声誉。创建 Blink-Diff 是为了记住这一点,并通过考虑亚像素化和抗锯齿进行优化以减少误报。四维色彩空间中的阈值和勾股距离计算等附加功能可确保这种情况不会经常发生。此外,过滤器可以应用于图像,例如比较像素的亮度而不是其饱和度。Blink-Diff 还部分支持提供时可以打开的感知比较perceptual=true. 然后,将根据人类感知而不是根据物理世界来比较颜色。但是,尚不支持高频滤波器。

项目命名

该名称来自天文学中使用Blink 比较器,用于识别多张照片中的差异,连续几天、几个月或几年拍摄天空中同一区域的照片。最值得注意的是,它被用来发现冥王星。

贡献

如果您有关于如何改进blink-diff 的想法,请随时创建问题或创建拉取请求。我们对贡献规则相当宽松;尽可能为您的拉取请求添加测试,但如果没有也没关系 – 我们会为您添加它们。我们正在努力尽可能地改进blink-diff,而这只能通过社区的贡献来完成。

此外,即使您只是简单地向我们提供了一个功能的想法并且没有实际编写代码,我们仍然会将您添加为下面的贡献者,因为如果没有您,它可能不会存在。所以,让他们来吧!

贡献者

第三方库

此模块使用以下第三方库:

依赖关系

开发依赖

执照

麻省理工学院执照

版权所有 2014-2015 雅虎公司。

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:blink-diff中文文档|blink-diff js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}