npm包niffy使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，很多时候需要比较两个网页的差异性，来调试问题或者监测爬虫等情况。本文将要介绍一种npm包—niffy，可以方便地帮助开发者完成网页截图并比较，以及输出差异性的相关信息。

niffy的介绍

niffy是一种npm包，可以对两张图片的不同进行比较，同时在控制台输出整张图片的相似度和两张图片的不同点的数量和颜色差异。

niffy的安装

使用npm安装

npm install niffy

niffy的基本用法

1. 调用niffy包

const niffy = require('niffy');

2. 使用`capture()`函数生成两张网页的截图

let options = { width: 1440, height: 900 };
let urls = ['https://www.baidu.com', 'https://www.google.com'];

let images = await Promise.all(urls.map((url) => {
    return niffy.capture(url, options);
}));

3. 使用`compare()`函数比较这两张图片

let [diff, isSameDimensions, dimensionDifference, image1PixelsChanged, image2PixelsChanged, pixelsDifference] = niffy.compare(images[0], images[1]);

console.log(`diff: ${diff}`);
console.log(`isSameDimensions: ${isSameDimensions}`);
console.log(`dimensionDifference: ${dimensionDifference}`);
console.log(`image1PixelsChanged: ${image1PixelsChanged}`);
console.log(`image2PixelsChanged: ${image2PixelsChanged}`);
console.log(`pixelsDifference: ${pixelsDifference}`);

4. 将结果输出到控制台

diff: 14.67%
isSameDimensions: true
dimensionDifference: { width: 0, height: 0 }
image1PixelsChanged: 8400
image2PixelsChanged: 9116
pixelsDifference: 69.93%

niffy的高级用法

1. 根据图片差异性以及不同位置，生成结果图片

let resultImage = niffy.generateDiffImage(images[0], images[1]);

let fs = require('fs');
let path = require('path');
let resultPath = path.join(__dirname, 'result.png');
await fs.writeFileSync(resultPath, resultImage);

2. 使用qunit进行测试

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

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

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

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

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

niffy包的局限性

niffy依赖PhantomJS和Cairo来生成和处理图片。目前，PhantomJS已基本停止更新和维护，而Cairo只支持一些操作系统。如果您是在使用Windows系统进行开发，您将无法使用niffy。

另外，生成的结果图片中，颜色是以rgba形式展现的，如果需要其他展示颜色的类型，需要自己处理。

总结

本文以niffy作为例子，展示了如何使用npm包进行操作，同时也向大家介绍了一些基本概念和注意事项。要在前端开发中使用npm，需要对npm的依赖性和平台问题进行了解，只有深入掌握它们，在实际开发中才能更加得心应手。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedd60bbb4e78292a6fb88d

npm包niffy使用教程

前言